在 React 中单击更改背景颜色

作者

在 React 中单击时更改背景颜色

Change background color 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>
      <div
        style={{
          backgroundColor: isActive ? 'salmon' : '',
          color: isActive ? 'white' : '',
        }}
        onClick={handleClick}
      >
        Hello world
      </div>
    </div>
  );
}

单击更改背景颜色

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

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

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

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

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

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

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

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

–

发表评论