材质ui选择改变时不冒泡。

Question

我有一个div，它有一个素材ui选择，素材uiTextField和一个普通的html选择.这个div有一个onchange事件，它只是简单的控制台记录了 event.target.value. 当材料的变化ui TextField或选择被触发时。event.target.value 被记录到控制台。但对于材料选择的改变，却没有记录。

示例代码。https:/codesandbox.iosmaterial-demo-03495?file=demo.tsx。

我错过了什么？

谢谢，我有一个div，其中有一个素材ui选择，素材ui文本字段和普通html选择。

Answer 1

触发变化的事件确实会冒泡，但它不是一个 "变化 "事件。触发变化的事件确实会冒泡，但它不是 "变化 "事件。onChange 您提供的函数会被调用，以响应一个 点击事件上 MenuItem. 而即使是 "点击 "事件，也可能是一个点击事件，或者是一个 按键事件 (例如，如果你使用方向键，然后再使用 进入 来选择一个项目）。)

这里是对你的沙盒进行修改，增加了一些控制台日志。https:/codesandbox.iosmaterial-demo-u5b51?file=demo.tsx。.

Answer 2

您可以使用 本土 属性。你将得到的UI是 材质 但功能为 本土 选择，从而也就有了气泡。

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

Answer 3

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