【问题标题】: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 中。

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2015-07-03
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2021-12-15
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多