Material ui select onchange 没有冒泡答案

【问题标题】：Material ui select onchange is not bubblingMaterial ui select onchange 没有冒泡
【发布时间】：2020-09-24 17:31:41
【问题描述】：

我有一个 div，它有一个材质 ui Select、材质 ui TextField 和一个纯 html 选择。这个 div 有一个 onchange 事件，它只是控制台记录 event.target.value。当材质 ui TextField 的 onchange 或 select 被触发时，event.target.value 被记录到控制台。但不适用于材质ui选择的onchange。

示例代码：https://codesandbox.io/s/material-demo-03495?file=/demo.tsx

我在这里错过了什么？

谢谢。

【问题讨论】：

标签： reactjs material-ui event-bubbling

【解决方案1】：

触发更改的事件确实冒泡，但它不是“更改”事件。您提供的onChange 函数被调用以响应click event on the MenuItem。甚至那个“点击”事件也可以是点击事件或key down event（例如，如果您使用箭头键然后 Enter 选择一个项目）。

这是对沙箱的修改，带有一些额外的控制台日志记录：https://codesandbox.io/s/material-demo-u5b51?file=/demo.tsx。

【讨论】：

【解决方案2】：

您可以使用 native 属性。您将获得作为 Material 的 UI，但作为 native 选择的功能也会出现气泡。

      <Select
        native
        value={muiSelectValue}
        onChange={handleMuiSelectOnChange}
        autoWidth
      >
        <option value="one">One</option>
        <option value="two">Two</option>
        <option value="three">Three</option>
      </Select>

【讨论】：

【解决方案3】：

你没有错过任何东西。如果您在句柄更改函数中添加console.log(event)，您将知道本机元素的事件是syntheticEvents，您将在MUI 的句柄更改中获得的事件将是class 作为对象。因此，每当您更改值时，它都不会反映到您的实际 div 中。

【讨论】：