Question

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

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

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

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

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

Answer 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>

Answer 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);
    };
}

Answer 3

你可以只用一个状态 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>

Answer 4

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

状态和事件处理程序-

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 个答案:

代码