React 点击按钮变灰：简单实现与代码示例

在 React 中，可以通过 CSS 样式来改变元素的颜色。你可以通过给元素添加一个类名来改变其样式。下面是一个示例代码：\n\njsx\nimport React, { useState } from 'react';\nimport './App.css';\n\nfunction App() {\n const [isClicked, setIsClicked] = useState(false);\n\n const handleClick = () => {\n setIsClicked(true);\n };\n\n return (\n <div className={`box ${isClicked ? 'gray' : ''}`} onClick={handleClick}>\n Click me\n </div>\n );\n}\n\nexport default App;\n\n\n在上面的代码中，我们使用 useState 来创建一个名为 isClicked 的状态。当元素被点击时，我们调用 handleClick 函数来更新 isClicked 状态为 true。然后，我们在元素的 className 属性中使用了 isClicked 状态来决定是否添加一个名为 gray 的类名。\n\n在 CSS 文件（例如 App.css）中，你可以定义 .gray 类来设置元素的灰色样式：\n\ncss\n.gray {\n background-color: gray;\n}\n\n\n这样，当元素被点击后，它的背景颜色将变为灰色。