如何获取 Material UI 'Autocomplete' 组件的名称？

Question

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

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

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

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

是否有任何方法可以检索已更改组件的名称？

Answer 1

您未定义的原因是onChange 中的event.target 指向li，但MaterialUi 自动完成功能会将name 添加到外部div。所以，没有直接的方法。您可以使用ref 和getAttribute 来获取名称。

代码 sn-p

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"
        />
      )}
    />
  );
}