React技巧之改变元素样式

React 10月前 510

三元运算符

在React中，通过点击事件来改变元素的样式：

在元素上设置onClick属性。
当元素被点击时，设置激活的state。
使用三元运算符，基于state变量有条件地设置新样式。

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 属性，所以每当元素被点击时，handleClick函数就会被调用。在该函数中，我们只是切换isActive状态。

如果你不想在每次点击元素时改变样式，你可以将状态设置为激活，例如setIsActive(true)。

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

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

三元运算符与if/else 语句十分相似。换句话说，如果isActive 变量值为true，我们会设置backgroundColor属性为salmon，否则设置为空字符串。

你可以用这种方法来改变组件中任何元素的样式，它不一定是用户点击的那个。

currentTarget

同样的，你可以使用event对象上的currentTarget属性。

在元素上设置onClick属性。
在事件处理函数中，通过event.currentTarget访问元素。
在元素上使用style对象设置样式。

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>
  );
}

我们可以通过event对象上的currentTarget属性来访问元素。event上的currentTarget属性让我们可以访问事件监听器所连接的元素。

下面的示例向我们展示了，如何通过点击事件改变元素上的样式。

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对象设置样式。

event.currentTarget.style.backgroundColor = 'salmon';

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

如果你需要为元素添加样式，可以使用classList.add方法。

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

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

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

如果你需要在点击时为元素切换样式，可以使用classList.toggle方法。

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

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

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布，任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站。本站所有源码与软件均为原作者提供，仅供学习和研究使用。如您对本站的相关版权有任何异议，或者认为侵犯了您的合法权益，请及时通知我们处理。

React.js

三元运算符

currentTarget

相关文章