只允许跨多个按钮的一种活动状态答案

【问题标题】：Allowing only one active state across multiple buttons只允许跨多个按钮的一种活动状态
【发布时间】：2021-03-28 15:16:39
【问题描述】：

我试图让 3 个按钮根据是否单击其他按钮来切换其活动状态。
因此，如果按钮 1 处于活动状态，则按钮 2 和 3 不应该处于活动状态。我的按钮是这样排列的。

<ButtonClickable3  name="Medium" value="10" onClick={(event) => addPizza(event)}></ButtonClickable3>
<ButtonClickable3 name="Large" value="15" onClick={(event) => addPizza(event)}></ButtonClickable3>
<ButtonClickable3 name="Extra Large" value="20" onClick={(event) => addPizza(event)}></ButtonClickable3>

组件就是这个

const ButtonClickable3 = (props) => {
    const [isActive, setActive] = useState("false");
    const handleToggle = (e) => {
     setActive(!isActive);
     props.onClick(e)
     
    }; 
     return <button
               type="button"
               value={props.value}
               name={props.name}
               className={isActive ? "button btn fourth" : "button btn fourthActive"}
               onClick={handleToggle}
             >
              {props.name}
             </button>
   
   }

目前我唯一能做的就是让所有按钮一起打开和关闭。 IE。单击一个，它们都会更改活动状态。
我怎样才能让一次只有一个活跃？
我已经把我的代码放在一个codesanbox中

here 感谢您的帮助。

【问题讨论】：

我在您发布的代码和框中没有看到问题
如果有三个按钮并且一次只能选择一个，则首选使用单选按钮（并且更易于访问）。
@EugenSunic 我认为问题在于，如果您选择按钮 1 然后选择按钮 3，按钮 1 仍然具有活动颜色。您还可以选择和取消选择尺寸。我同意 ZsoltMeszaros 所说的，单选按钮对于这样的功能更有意义。

标签： javascript css reactjs button

【解决方案1】：

按钮的状态需要从 ButtonClickable3 组件向上移动到父组件。

所以你会有类似的东西

const [selectedPizzaSize, setSelectedPizzaSize] = useState()

然后将 selected 属性传递给组件本身

<ButtonClickable3 name="Medium" value="10" selected={selectedPizzaSize === "10"} onClick={(event) => addPizza(event)}></ButtonClickable3>
<ButtonClickable3 name="Large" value="15" selected={selectedPizzaSize === "15"} onClick={(event) => addPizza(event)}></ButtonClickable3>
<ButtonClickable3 name="Extra Large" value="20" selected={selectedPizzaSize === "20"} onClick={(event) => addPizza(event)}></ButtonClickable3>

您需要在 addPizza 函数中调用 setSelectedPizzaSize

【讨论】：