React JS实现点击单个按钮启用、其余按钮禁用的方法

要实现“点击某按钮时仅启用该按钮，禁用其余所有”的需求，核心是用状态记录当前选中的按钮ID，而非用单一布尔值控制所有按钮状态。你的原代码中所有按钮共享同一个布尔状态，导致状态完全同步，这是问题所在。

修改步骤： #

• 将状态从单一布尔值改为存储选中按钮的ID（初始值可设为null，也可直接指定默认选中的按钮ID）
• 点击按钮时，把当前按钮的ID存入状态
• 每个按钮根据自身ID是否与状态中的ID匹配，决定禁用状态：选中的按钮启用（disabled={false}），其余按钮禁用（disabled={true}）

修改后的完整代码： #

import { useState } from 'react'; // 需导入useState

export function OtherMethod () {
    // 状态存储当前选中的按钮ID，初始为null表示无默认选中
    const [selectedBtnId, setSelectedBtnId] = useState(null);
  
    function myFunc(e){
        // 点击时记录当前按钮的ID
        setSelectedBtnId(e.target.id);
    }
      
    return (
        <div id="container" >
            {/* 每个按钮通过对比自身ID与选中ID，设置禁用状态 */}
            <button id="1" disabled={selectedBtnId !== null && selectedBtnId !== "1"} onClick={myFunc}> click me</button>
            <button id="2" disabled={selectedBtnId !== null && selectedBtnId !== "2"} onClick={myFunc}>abc</button>
            <button id="3" disabled={selectedBtnId !== null && selectedBtnId !== "3"} onClick={myFunc} >def</button>
            <button id="4" disabled={selectedBtnId !== null && selectedBtnId !== "4"} onClick={myFunc}>ghi</button>
        </div>   
    )
}

补充说明： #

• 若希望页面加载时默认选中某按钮，只需将初始状态设为对应ID，比如useState("1")，此时第一个按钮默认启用，其余禁用。
• 条件selectedBtnId !== null && selectedBtnId !== "1"的作用是：初始无选中时所有按钮都启用；一旦选中某按钮，仅该按钮保持启用。如果不需要初始全启用的状态，直接写selectedBtnId !== "1"即可，初始时所有按钮都会禁用，直到用户点击选择。

内容的提问来源于stack exchange，提问作者Ammar Kiani