MaterialUI MenuItem内点击输入组件触发onChange的解决方法

问题核心是事件冒泡：MenuItem的点击事件会向上传递给父级Select组件，触发其onChange回调——哪怕你点击的是MenuItem内部的输入框或按钮这类子元素。

解决方法很直接，在不需要触发选中的子元素上阻止事件冒泡：

1. 给QuantityInput添加onMouseDown和onClick事件，调用event.stopPropagation()，阻止事件向上传递到MenuItem和Select：

修改后的MenuItem代码片段：

<MenuItem
    key={prod.ID}
    value={prod}
>
    <Checkbox checked={selectValues.indexOf(prod) > -1} />
    {prod.LABEL}
    <QuantityInput
        min={0}
        max={10}
        onMouseDown={(event) => event.stopPropagation()}
        onClick={(event) => event.stopPropagation()}
    />
</MenuItem>

2. 为什么用onMouseDown？
   Material-UI的Select组件是通过监听mousedown事件来触发选项选中逻辑的，阻止这个事件的冒泡比只阻止click更彻底，能完全避免触发Select的选中回调。

如果你的QuantityInput是自定义组件，要确保这些事件能正确传递到内部的输入元素上（比如把事件props透传给内部的<input>标签）。

内容的提问来源于stack exchange，提问作者João Ferreira