javascript - 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>

我可以通过访问菜单项的名称属性

event.currentTarget.getAttribute('name');

但是，迁移到 v5 后，event.currentTarget 返回 null。有什么建议吗？

Answer 1

SelectInput 有这个 onChange 定义:

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

这意味着您可以将 child 作为 handleChange 的第二个参数进行点击。在这里，您可以使用 child.props.name 访问 name 属性。

但是值得注意的是，MenuItem 没有名称属性，如果您定义它，Typescript 会将其高亮显示为错误。为避免这种情况，您可以使用 event.target.value 查找具有匹配 code 的表并以这种方式获取名称:

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