OnClick 功能不适用于自定义按钮组件答案

【问题标题】：OnClick function not working with custom button ComponentOnClick 功能不适用于自定义按钮组件
【发布时间】：2021-03-27 19:06:30
【问题描述】：

我将用户单击的按钮的值传递给具有以下功能的数组。

 const [pizzaSize, setPizzaSize] = useState("Choose your Pizza Size");
  const [startPrice, setStartPrice] = useState(0);
  const addPizza = (e) => {
    setPizzaSize(e.target.name);
    setStartPrice(parseInt(e.target.value));
  };

我想使用自定义按钮组件来打开和关闭它，就像我已经在同一页面上使用其他按钮一样。

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

最后我调用函数如下

<ButtonClickable3 name="test" value="5" onClick={(event) => addPizza(event)}></ButtonClickable3>

当我使用常规按钮时，该功能起作用，所以我很难理解为什么自定义按钮不起作用。
我的自定义按钮 1 和 2 也可以使用，但它们使用的是不同的功能。我已将我的完整代码放在代码框here 上。
提前感谢您的帮助。

【问题讨论】：

标签： javascript reactjs button

【解决方案1】：

您原来的<button 具有name 属性，但<ButtonClickable3 没有。所以：

setPizzaSize(e.target.name);

ButtonClickable3 失败。你需要：

return <button
               type="button"
               name={props.name}
               value={props.value}

在ButtonClickable3内。

【讨论】：

我不敢相信它这么容易。第二双眼睛真的很有帮助，谢谢。