React事件参数event已弃用，MUI Select的change处理函数该用什么替代

关于继续使用弃用event的风险 #

你遇到的是React 17及以上版本中合成事件池复用机制的弃用警告，并非MUI废弃了onChange的event参数。

• 如果你仅同步读取event.target.value，没有将event存储到状态、或者在异步逻辑（setTimeout、Promise回调等）中访问event的操作，现有代码在当前React版本下可以正常运行，但不保证后续React大版本更新后不会失效。
• 如果你的代码存在异步访问event的场景，就算当前版本也可能出现读取属性为null/undefined的异常，更不建议继续用原有写法。

网上提到的bind、addEventListener是原生DOM事件的处理方案，完全不适合React合成事件场景，不需要采用，不会带来任何收益反而可能引发状态同步问题。

兼容方案（保持原有简洁写法无需修改组件调用） #

方案1（最推荐，完全不碰event对象） #

MUI的Select组件onChange回调默认提供第二个参数，直接返回选中的新值，你可以直接使用，完全避开event的弃用问题，同时保持调用逻辑不变：

// 类型可以根据你的value实际类型调整，比如number、string联合类型等
const handleChange = (_event: React.SyntheticEvent, newValue: string) => {
  setState(newValue);
};

你的Select组件调用代码不需要做任何修改，还是直接传递onChange={handleChange}即可，和原来的写法一样简洁，同时符合TS类型规范，没有任何警告。

方案2（需要访问event其他属性时使用） #

如果你确实需要读取event上的其他属性（比如event.target.name做统一字段处理），只需要调用event.persist()将合成事件从复用池中取出即可消除警告：

const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
  event.persist();
  setState(event.target.value);
  // 就算后续异步访问event属性也不会出问题
};

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