在 React 中单击更改元素的样式

作者

在 React 中单击时更改元素的样式

Change the Style of an element on click in React

要在 React 中通过单击更改元素的样式：

  1. onClick在元素上设置道具。
  2. 单击元素时，设置活动状态。
  3. 使用三元运算符根据状态变量有条件地设置新样式。
应用程序.js
import {useState} from 'react';

export default function App() {
  const [isActive, setIsActive] = useState(false);

  const handleClick = () => {
    // 👇️ toggle
    setIsActive(current => !current);

    // 👇️ or set to true
    // setIsActive(true);
  };

  return (
    <div>
      <button
        style={{
          backgroundColor: isActive ? 'salmon' : '',
          color: isActive ? 'white' : '',
        }}
        onClick={handleClick}
      >
        Click
      </button>
    </div>
  );
}

点击切换元素样式

我们onClick在元素上设置了 prop，所以每次单击它时，
handleClick都会调用该函数。

在我们的handleClick函数中，我们只是切换isActive状态。

您可以将状态设置为活动状态，例如setIsActive(true)，如果您不想在每次单击元素时都更改样式。

我们使用
三元运算符
有条件地设置backgroundColor元素的样式。

应用程序.js
<button
  style={{
    backgroundColor: isActive ? 'salmon' : '',
    color: isActive ? 'white' : '',
  }}
  onClick={handleClick}
>
  Click
</button>

if/else三元运算符与语句非常相似。

它检查问号左边的值是否为真，如果是，运算符返回冒号左边的值，否则返回右边的值。

换句话说，如果isActive变量存储一个true值，我们将
backgroundColor属性设置为salmon，否则将其设置为空字符串。

您可以使用这种方法来更改组件中任何元素的样式。它不一定是用户单击的那个。

或者，您可以使用对象的currentTarget属性event。

要在 React 中通过单击更改元素的样式：

  1. onClick在元素上设置道具。
  2. 在事件处理函数中，访问元素作为event.currentTarget.
  3. 使用该style对象在元素上设置样式。
应用程序.js
export default function App() {
  const handleClick = event => {
    event.currentTarget.style.backgroundColor = 'salmon';
    event.currentTarget.style.color = 'white';

    event.currentTarget.classList.add('my-class-1', 'my-class-2');
  };

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

单击更改元素的样式

我们可以通过对象的currentTarget属性访问元素event
。

上的currentTarget属性event使我们可以访问事件侦听器附加到的元素。

而 上的target属性event为我们提供了对触发事件的元素的引用（可能是后代）。

上面的示例显示了如何在单击时更改元素的样式。如果您需要toggle单击元素的样式，请有条件地检查样式是否存在。
应用程序.js
export default function App() {
  const handleClick = event => {
    // 👇️ toggle styles on click
    if (event.currentTarget.style.backgroundColor) {
      event.currentTarget.style.backgroundColor = null;
      event.currentTarget.style.color = null;
    } else {
      event.currentTarget.style.backgroundColor = 'salmon';
      event.currentTarget.style.color = 'white';
    }

    // 👇️ toggle class on click
    event.currentTarget.classList.toggle('my-class-1', 'my-class-2');
  };

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

点击切换元素样式

如果需要在点击时为元素设置样式，直接通过元素的style对象设置样式。

应用程序.js
event.currentTarget.style.backgroundColor = 'salmon';

但是，如果每次单击元素时都必须切换样式，则必须有条件地检查该类是否存在，如果存在则将其删除，否则添加该类。

如果需要向元素添加类，请使用
classList.add
方法。

应用程序.js
// 👇️ add class
event.currentTarget.classList.add('my-class-1', 'my-class-2');

// 👇️ remove class
event.currentTarget.classList.remove('my-class-1', 'my-class-2');

该方法可以传递一个或多个类。

如果您需要在单击时切换元素上的类，请使用
classList.toggle
方法。

应用程序.js
event.currentTarget.classList.toggle('my-class-1', 'my-class-2');

如果类存在，该classList.toggle方法会从元素中删除现有类。否则，它将类添加到元素。

–