Material ui select onchange不冒泡

Question

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

的 onchange

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

我在这里错过了什么？

谢谢。

Answer 1

您可以使用 native 属性。您将获得 UI 作为 Material 但功能与 native select 一样，因此也会出现气泡。

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

Answer 2

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

Answer 3

触发更改的事件确实冒泡，但它不是 "change" 事件。您提供的 onChange 函数被调用以响应 click event on the MenuItem. And even that "click" event could either be a click event or a key down event（例如，如果您使用箭头键然后 Enter 到 select 一个项目） .

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

Material ui select onchange不冒泡

Material ui select onchange is not bubbling

reactjs

material-ui

event-bubbling