如何获取 Material UI“自动完成”组件的名称？

Question

我正在使用多个自动完成MUI 组件，目前正在尝试编写一个“通用”事件处理程序，该处理程序将调用useReducer钩子来存储状态。

问题是在Autocomplete文档中，onChange 函数如下所示：

function(event: object, value: T | T[], reason: string) => void

我试图从事件对象中获取字段的名称（以确定正在更改的自动完成内容），但是event.target.name和event.currentTarget.name不起作用。

有什么方法可以检索已更改的组件的名称吗？

Answer 1

未定义的原因是event.target中的 指向onChange，li但 MaterialUi Autocomplete 会将 添加name到外部div。因此，没有直接的方法。您可以使用 aref和 usegetAttribute来获取名称。

代码片段

export default function ComboBox() {
  const ref0 = useRef();

  return (
    <Autocomplete
      id="combo-box-demo"
      ref={ref0}
      name="movies"
      options={top100Films}
      getOptionLabel={option => option.title}
      onInputChange={(e, v, r) => {
        const ev = e.target;
        if (r === "reset") console.log(ev, v, r);
      }}
      onChange={(e, v, r) => {
        console.log(ref0.current.getAttribute("name"));
      }}
      style={{ width: 300 }}
      renderInput={params => (
        <TextField
          name="auto-input"
          {...params}
          label="Combo box"
          variant="outlined"
        />
      )}
    />
  );
}