如何在MUI Select组件中通过event.target获取Select的id？

问题原因 #

你遇到的问题是Material-UI的Select组件触发onChange时，event.target指向的是被选中的MenuItem而非Select本身，所以拿不到你给Select设置的id值——这不是你的写法问题，是组件内部事件委托机制导致的。

解决方案：用高阶函数实现通用处理器 #

最简洁可靠的方式是写一个高阶函数，提前把Redux对应的键（也就是输入框/Select的id）传进去，不用依赖事件对象里的target信息，文本输入和Select都能复用同一个处理器：

const handleChange = (key) => (event) => {
  dispatch(formActions.set({ key, value: event.target.value }));
};

然后修改组件调用：

文本输入框使用：

<OutlinedInput
  id="textField"
  label="Test Text Field"
  defaultValue="Stuff"
  onChange={handleChange("textField")}
/>

Select组件使用：

<Select
  labelId="spending-plan-label"
  id="spendingPlan"
  value={state.spendingPlan}
  label="Spending Plan"
  onChange={handleChange("spendingPlan")}
>
  <MenuItem value="inflation-adjusted">Inflation Adjusted</MenuItem>
  <MenuItem value={20}>Twenty</MenuItem>
  <MenuItem value={30}>Thirty</MenuItem>
</Select>

这样你可以删掉原来的handleTextInputChange和handleSpendingPlanChange，只用这一个通用处理器，完全符合DRY原则。

额外思路：利用Select的onChange第二个参数 #

如果坚持想通过事件信息获取，Material-UI的Select的onChange会传入第二个参数，包含选中项的相关信息，你可以从这里拿到Select的id：

const handleChange = (event, child) => {
  const key = child.props.id;
  dispatch(formActions.set({ key, value: event.target.value }));
};

不过这种方式不如高阶函数直接传key稳定，因为Material-UI组件内部结构变化可能会影响这个参数的结构。

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