使用 React onClick() 事件更改 CSS 样式

React 是一种用于构建用户界面的 JavaScript 库，其中的 onClick() 事件可以帮助我们更改 CSS 样式。本文旨在介绍如何在 React 中使用 onClick() 事件来更改 CSS 样式。

onClick() 事件

onClick() 事件是 React 中最常用的事件之一，它可以为元素添加一个单击事件处理程序。当用户单击该元素时，该事件处理程序将被调用。

以下是一个简单的示例，该示例在用户单击按钮时显示一条消息：

import { useState } from 'react';

function App() {
  const [message, setMessage] = useState('');

  const handleClick = () => {
    setMessage('Hello, world!');
  };

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
      <p>{message}</p>
    </div>
  );
}

在上述代码中，我们使用 useState() 钩子来创建一个名为 message 的状态变量。当按钮单击时，我们调用 handleClick() 函数，并将消息设置为“Hello, world!” ，从而更改 message 的值。最后，我们在 p 元素中显示该消息。

更改 CSS 样式

通过使用 onClick() 事件，我们可以更改 CSS 样式。假设我们有一个按钮，当用户单击该按钮时，我们想更改其背景颜色。以下是一个示例：

import { useState } from 'react';

function App() {
  const [background, setBackground] = useState('white');

  const handleClick = () => {
    setBackground('red');
  };

  const styles = {
    button: {
      backgroundColor: background,
      padding: '10px 20px',
      border: 'none',
      borderRadius: '5px',
      color: '#fff',
    },
  };

  return (
    <div>
      <button onClick={handleClick} style={styles.button}>
        Click me
      </button>
    </div>
  );
}

在上述代码中，我们使用 useState() 钩子来创建一个名为 background 的状态变量。当按钮单击时，我们调用 handleClick() 函数，并将背景设置为红色，从而更改 background 的值。

我们还使用了一个名为 styles 的对象来定义按钮的 CSS 样式。该对象包含一个名为 button 的属性，该属性是一个包含 background、padding、border、borderRadius 和 color 属性的对象。在按钮元素中，我们使用 style 属性来将该对象应用到按钮的样式中。

总结

在 React 中，我们可以使用 onClick() 事件来更改 CSS 样式。通过使用 useState() 钩子来创建状态变量，我们可以跟踪元素的状态并在单击时更改其样式。最后，我们可以使用对象来定义 CSS 样式，并使用 style 属性将其应用到元素上。

希望这篇文章对你有所帮助！