MUI v5 - 更新后無法通過 event.currentTarget 訪問 MenuItem 屬性

Question

我以前在 v4 上，我的 Select 和 MenuItems 設置如下：

const [select, setSelect] = useState('');
const [customName, setCustomName] = useState('');

const handleChange = (event) => {
    setSelect(event.target.value);
    setCustomName(event.currentTarget.getAttribute('name'));
  };

...

                <Select
                  label="Choose A Dataset"
                  onChange={handleChange}
                  value={select}
                >
                  {tables &&
                    tables.map(
                      (table, index) =>
                          (
                          <MenuItem
                            key={table.name}
                            value={table.code}
                            name={table.name}
                          >
                            {table.name}
                          </MenuItem>
                        )
                    )}
                </Select>

我可以通過訪問 menuItem 的 name 屬性

event.currentTarget.getAttribute('name');

但是，遷移到 v5 后，event.currentTarget 返回 null。 有什么建議么？

Answer 1

SelectInput有這個onChange定義：

onChange?: (event: SelectChangeEvent<T>, child: React.ReactNode) => void;

這意味着您可以讓孩子點擊作為您的handleChange的第二個參數。 在這里，您可以使用child.props.name訪問 name 屬性。

但是值得注意的是MenuItem沒有 name 屬性，如果您定義它 Typescript 將突出顯示為錯誤。 為避免這種情況，您可以使用event.target.value查找具有匹配code的表並以這種方式獲取名稱：

const name = tables.find((table) => table.code === event.target.value).name;