React按钮点击禁用失效问题求助：双状态修改未生效

你当前代码的核心问题是用同一个disable状态控制两个按钮的禁用状态，导致逻辑混乱：

• 点击ON按钮时，disable设为true，两个按钮会同时被禁用，无法再点击OFF按钮切换状态
• 点击OFF按钮时，disable设为false，两个按钮又同时恢复可点击，完全达不到“点击对应按钮时禁用该按钮”的效果

修复方案 #

给每个按钮单独维护禁用状态，用disableOn控制ON按钮，disableOff控制OFF按钮，实现按钮禁用状态的独立控制。

修改后的代码 #

import { useState } from 'react';

function App() {
  const [loading, setLoading] = useState(false);
  // 为两个按钮分别设置禁用状态
  const [disableOn, setDisableOn] = useState(false);
  const [disableOff, setDisableOff] = useState(false);

  return (
    <div>
      <p>Data is {loading ? "Loading" : "not Loading"} </p>
      <button
        onClick={() => {
          setLoading(true);
          // 点击ON按钮时，仅禁用自身
          setDisableOn(true);
          // 同时启用OFF按钮，允许切换状态（可根据需求调整）
          setDisableOff(false);
        }}
        disabled={disableOn}
      >
        ON
      </button>
      <button
        onClick={() => {
          setLoading(false);
          // 点击OFF按钮时，仅禁用自身
          setDisableOff(true);
          // 同时启用ON按钮，允许切换状态（可根据需求调整）
          setDisableOn(false);
        }}
        disabled={disableOff}
      >
        OFF
      </button>
    </div>
  );
}

export default App;

代码说明 #

• 新增disableOn和disableOff两个独立状态，分别绑定对应按钮的disabled属性
• 点击某个按钮时，仅修改自身的禁用状态，同时可根据需求恢复另一个按钮的可点击状态，保证状态切换的合理性

内容的提问来源于stack exchange，提问作者M Hassan khan