MUI v5升级后无法通过event.currentTarget获取MenuItem属性问题咨询

MUI v5 重构了 Select 组件的内部事件处理逻辑，适配 React 17+ 的事件委托机制，onChange 回调触发时原生事件的 currentTarget 已经被解绑重置，因此会返回 null，无法沿用 v4 版本通过 currentTarget 拿自定义属性的写法。

方案1：通过 onChange 回调第二个参数直接取属性（改动最小） #

MUI v5 的 Select 组件 onChange 回调默认提供第二个参数，就是当前选中的 MenuItem 组件实例，直接从实例的 props 中就能拿到你定义的 name 属性，原有 Select、MenuItem 代码无需修改，只需要调整 handleChange 逻辑即可：

const handleChange = (event, selectedItem) => {
  setSelect(event.target.value);
  setCustomName(selectedItem.props.name);
};

方案2：提前构建值映射表（性能最优） #

如果你的业务场景不依赖组件属性，可以提前把 table.code 和 table.name 构建成映射对象，选中后直接用值查询对应名称，完全不依赖事件和组件逻辑，稳定性更高：

// 提前构建code到name的映射
const codeToName = tables.reduce((res, table) => {
  res[table.code] = table.name;
  return res;
}, {});

const handleChange = (event) => {
  const selectedCode = event.target.value;
  setSelect(selectedCode);
  setCustomName(codeToName[selectedCode]);
};

内容的提问来源于stack exchange，提问作者coder1234321