如何根据其他按钮的状态禁用按钮答案

【问题标题】：How to disable button based on state of other button如何根据其他按钮的状态禁用按钮
【发布时间】：2021-03-25 18:11:19
【问题描述】：

我正在尝试使用材料 ui 按钮在 React 应用程序中创建 2 个按钮，并且在页面加载开始时启用这两个按钮。当 onClick 一个按钮时，另一个按钮应该被禁用，反之亦然。

Initial state

When onClick

const [btn1, setBtn1] = useState(false);
const [btn2, setBtn2] = useState(false);

const onBtn1 = () => {
        setBtn1(!btn1);
    };

    const onBtn2 = () => {
        setBtn2(!btn2);
    };
}

我该怎么做呢？有没有办法只使用一个 useState 钩子来处理 2 个状态按钮？

【问题讨论】：

标签： reactjs typescript material-ui

【解决方案1】：

您可以在单击按钮时启用另一个按钮：

const onBtn1 = () => {
   setBtn1(prevState => !prevState);
   setBtn2(false);
};

const onBtn2 = () => {
   setBtn2(prevState => !prevState);
   setBtn1(false);
};

在 JSX 中：

<button onClick={onBtn1} disabled={btn1}>btn1</button>
<button onClick={onBtn2} disabled={btn2}>btn2</button>

【讨论】：

【解决方案2】：

按下时改变其他按钮的状态。

const [btn1, setBtn1] = useState(true);  //Initially both buttons are enabled
const [btn2, setBtn2] = useState(true);

const onBtn1 = () => {
        setBtn1(!btn1);
        setBtn2(false);
    };

    const onBtn2 = () => {
        setBtn2(!btn2);
        setBtn1(false);
    };
}

【讨论】：

【解决方案3】：

您可以使用单一状态，请参考以下建议：

状态和事件处理程序-

const [activeButton, setActiveButton] = useState("None");


const onBtn1 = () => {
        setActiveButton("Button1");
    };


const onBtn2 = () => {
        setActiveButton("Button2");
    };

HTML 元素部分 -

<Button disabled={!['None', 'Button1'].includes(activeButton)}>Button1</Button>
<Button disabled={!['None', 'Button2'].includes(activeButton)}>Button2</Button>

【讨论】：

【解决方案4】：

您只需使用一种状态variable 和一种function 即可实现此目的

代码

const [disabledButton, setDisabledButton] = useState('');      

const onButtonClick = (param) => {
  setDisabledButton(param);
}    

<Button onClick={() => onButtonClick('btn2')} disabled={disabledButton === 'btn1'}>
   Button 1
</Button>
<Button onClick={() => onButtonClick('btn1')} disabled={disabledButton === 'btn2'}>
   Button 2
</Button>

【讨论】：