时间戳

首页 > 解决方案 > 只允许跨多个按钮的一种活动状态

javascript - 只允许跨多个按钮的一种活动状态

问题描述

我试图让 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 One 被点击，它们都改变了活动状态。
我怎样才能让一次只有一个活跃？
我已经把我的代码放在一个codesanbox中

在这里 感谢您的帮助。

标签： javascriptcssreactjsbutton

解决方案

按钮的状态需要从 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>

您需要在函数setSelectedPizzaSize内部调用addPizza

推荐阅读