CSS 设置按钮禁用（新文件中的按钮组件）答案

【问题标题】：CSS set button disabled (button component in new file)CSS 设置按钮禁用（新文件中的按钮组件）
【发布时间】：2022-01-12 07:44:21
【问题描述】：

我现在的问题是我有一个 name.js 文件，它看起来像这样：

function name(props) {
    return (
        <div className="nav">
            <button className="btn" onClick={props.onClick} ></button>
            <button className="btn" onClick={props.onClick} ></button>
            <button className="btn" onClick={props.onClick} ></button>
            <button className="btn" onClick={props.onClick} ></button>
            <button className="btn" onClick={props.onClick} ></button>
         
        </div>
    )
}

export default name;

按钮具有值和名称，我删除它们会导致私有数据。现在 div 是我的导航栏，里面充满了这些按钮。如果我单击其中一个会改变颜色的按钮，我想要它。但是，如果我单击 app.js 中的一个按钮（不在此 Names 函数中），我在 Names 函数中单击的按钮应保持其颜色变化，直到我单击 names 函数中的另一个按钮。

【问题讨论】：

标签： javascript css reactjs jsx

【解决方案1】：

您需要创建状态来跟踪当前处于活动状态的按钮。我想到了两种方法。

创建一个简单的状态来跟踪当前按钮的活动状态。由于您似乎在使用 CSS 类名，我要么在所有按钮内创建三元组，要么在条件下添加另一个 BEM 修饰符来表示颜色的变化。
如果您涉及导航，您可能希望从该路由派生状态并遵循 1 上的策略，只需将条件更改为 route === "/home" 之类的内容。

为了进一步可视化，

<button className={ isCurrent ? "btnName" : "currentBtn" } />

【讨论】：