如何多次使用此 onclick 切換類事件？
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
單擊任何按鈕時，它適用于所有其他按鈕。
uj5u.com熱心網友回復：
您應該為包含 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"/>
</>
);
}
uj5u.com熱心網友回復：
這是供參考：
Magofoco的編輯答案
傳遞按鈕文本和 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" />
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/447831.html
標籤：javascript html css 反应 点击