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

Question

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

 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 也可以使用，但它们使用的是不同的功能。我已经把我的全部代码在codesandbox这里。
我预先感谢您的帮助。

Answer 1

你的原件<button有一个name属性，但<ButtonClickable3没有。所以：

setPizzaSize(e.target.name);

失败了ButtonClickable3。你需要：

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

里面ButtonClickable3。