Question

我有一个div，它具有一个材质ui Select，一个材质ui TextField和一个普通的html select。该div具有一个onchange事件，该事件只需控制台即可记录 event.target.value 。每当触发材料ui TextField的onchange或选择时， event.target.value 都会记录到控制台。但不是因为材料ui选择的变化。

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

我在这里想念什么？

谢谢。

Answer 1

您可以使用本地属性。您会以 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>

Answer 2

您什么都不丢失。如果在句柄更改函数中添加console.log(event)，您将知道本机元素的事件为syntheticEvents，其中您将在MUI的句柄更改中获得的事件将为class作为对象。因此，无论何时更改值，它都不会反映到您的实际div中。

Answer 3

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

这是对沙盒的修改，其中包含一些附加的控制台日志记录：https://codesandbox.io/s/material-demo-u5b51?file=/demo.tsx。

材质ui select onchange不冒泡

3 个答案: