ReactJS onclick 多次切换 class 事件

Question

如何多次使用此 onclick 切换 class 事件？

const [isActive, setActive] = React.useState(false);

<button
  onClick={() => setActive(!isActive)}
  className={`toggle ${isActive ? "active" : ""}`}
>
 Categories
</button>

这是沙盒中的问题：https://codesandbox.io/s/agitated-pond-tewk9h?file=/src/App.js

当点击任何按钮时，它适用于所有其他按钮。

Answer 1

您应该为包含 useState 的按钮创建一个组件。否则，useState 对于使用它的所有组件都是全局的。

示例： https://codesandbox.io/s/withered-feather-vj8owx?file=/src/App.js

const MyButtonComponent = ({myText}) => {
  const [isActive, setActive] = React.useState(false);

  return (
    <button
      onClick={() => setActive(!isActive)}
      className={`toggle ${isActive ? "active" : ""}`}
    >
      {myText}
    </button>
  );
};

export default function App() {
  return (
    <>
      <MyButtonComponent myText="Something" />
      <MyButtonComponent myText="Something else"/>
      <MyButtonComponent myText="Else something"/>
    </>
  );
}

Answer 2

供参考：

来自

的已编辑答案

传递按钮文本和 ID：

const MyButtonComponent = ({ myText, myId }) => {
  const [isActive, setActive] = React.useState(false);

  return (
    <Button
      onClick={() => setActive(!isActive)}
      className={`toggle ${isActive ? "active" : ""}`}
      id={myId}
    >
      {myText}
    </Button>
  );
};

export default function App() {
  return (
    <MyButtonComponent myText="something" myId="tab01" />
  );
}

ReactJS onclick 多次切换 class 事件

ReactJS onclick toggle class event multiple times

html

javascript

css

onclick

reactjs