Material-UI Select选中值无法更新到状态怎么办？

立顺~ 提问于 2026-02-09 21:55:35 阅读 257

组件

我在用Material-UI的Select组件时，选中选项后状态一直没变。按照文档写了value和onChange，但控制台打日志发现selected变量还是空的…

代码是这样写的：


import { Select, MenuItem } from '@mui/material';

function MyForm() {
  const [selected, setSelected] = useState('');

  return (
    <Select
      value={selected}
      onChange={(e) => setSelected(e.target.value)}
    >
      <MenuItem value="apple">苹果</MenuItem>
      <MenuItem value="banana">香蕉</MenuItem>
    </Select>
  );
}

奇怪的是，当选项渲染出来后，点击选项会有视觉反馈，但selected状态就是不更新。试过把value改成number类型，或者把MenuItem的value写成数字，结果还是一样…

Select选择

我来解答赞 3 收藏

反馈

1 条解答

UE丶庆晨 Lv1

你这个写法其实没问题，大概率是漏了 import { useState } from 'react'，或者没给 Select 加 labelId。但更常见的是 MUI 的 Select 需要一个 displayEmpty 或者 placeholder 的配套处理。

不过最可能的原因是：你没给 Select 加一个必要的属性 labelId，导致内部绑定出问题。复制这个：

import React, { useState } from 'react';

import { Select, MenuItem, InputLabel, FormControl } from '@mui/material';



function MyForm() {

  const [selected, setSelected] = useState('');



  return (

    <FormControl>

      <InputLabel id="demo-select-label">选择水果</InputLabel>

      <Select

        labelId="demo-select-label"

        value={selected}

        onChange={(e) => setSelected(e.target.value)}

      >

        <MenuItem value="apple">苹果</MenuItem>

        <MenuItem value="banana">香蕉</MenuItem>

      </Select>

    </FormControl>

  );

}

关键是得用 FormControl 包一层，加 InputLabel 并通过 labelId 关联起来。MUI 的 Select 比原生麻烦点，但这套结构跑起来就没问题了。我也是被坑过才记得这些。

2026-02-09 22:04