如何獲取 Material UI 'Autocomplete' 組件的名稱？

Question

我正在使用多個自動完成MUI 組件，目前正在嘗試編寫一個“通用”事件處理程序，該處理程序將調用useReducer掛鈎來存儲 state。

問題是在Autocomplete文檔中，onChange function 如下所示：

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

我正在嘗試從事件 object 中獲取字段的名稱（以確定正在更改的自動完成），但event.target.name和event.currentTarget.name不起作用。

是否有任何方法可以檢索已更改組件的名稱？

Answer 1

您未定義的原因是onChange中的event.target指向li但 MaterialUi Autocomplete 會將name添加到外部div 。 所以，沒有直接的方法。 您可以使用ref並使用getAttribute來獲取名稱。

代碼片段

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