Material-UI 的 Select 选中后怎么获取 value 值？

UP主～一泽提问于 2026-03-24 23:17:22 阅读 3

组件

我在用 Material-UI 的 Select 组件，绑定了 onChange 事件，但每次选中选项后拿到的 e.target.value 都是 undefined，不知道哪里出错了。

我试过把 MenuItem 的 value 属性写成字符串和数字，也检查了 state 初始化，还是不行。代码大概是这样的：

const [age, setAge] = React.useState('');

const handleChange = (e) => {
  console.log(e.target.value); // 这里输出 undefined
  setAge(e.target.value);
};

return (
  <Select value={age} onChange={handleChange}>
    <MenuItem value="10">Ten</MenuItem>
    <MenuItem value="20">Twenty</MenuItem>
  </Select>
);

Select选择

我来解答赞 0 收藏

反馈

1 条解答

开发者钰珂 Lv1

这个问题挺常见的，Material-UI 的 Select 组件在处理 onChange 事件时，e.target.value 确实有时候会让人困惑。实际上，你需要从 event 对象的 target 属性中获取 value，但在 Material-UI 中，正确的做法是通过 event.target 来获取 value，而不是直接用 e.target.value。

你可以在 handleChange 函数中通过 event.target.value 来获取选中的值。修改后的代码如下：

const [age, setAge] = React.useState('');



const handleChange = (e) => {

  console.log(e.target.value); // 这里应该可以正确输出选中的值

  setAge(e.target.value);

};



return (

  <Select value={age} onChange={handleChange}>

    <MenuItem value="10">Ten</MenuItem>

    <MenuItem value="20">Twenty</MenuItem>

  </Select>

);

这段代码看起来没问题，不过有时候问题可能出在其他地方，比如组件是否正确渲染或者是否有其他覆盖了这个行为的逻辑。确保 MenuItem 的 value 属性是正确的，并且 Select 的 value 和 onChange 都正确绑定。如果还是有问题，可以检查一下控制台有没有其他错误信息，有时候是其他地方出了问题导致的。

2026-03-25 00:00