React Hooks实现MUI Select选中项名称显示问题求助

你的代码存在冗余逻辑，同时handleSelectChange写法有误，调整后即可实现选中项名称同步显示在Select按钮上的需求：

1. 移除冗余状态：你使用的是MUI的<Select>组件，而非基础Menu组件，checked、anchorEl这些状态完全不需要，只保留控制选中值的value状态即可。
2. 修正handleSelectChange函数：MUI Select的onChange回调中，event.target.value就是你给<MenuItem>设置的value属性值（即当前选中的菜单项名称），直接用它更新value状态即可。
3. 删除MenuItem上的冗余事件：<Select>组件已经内置了选中逻辑，不需要给每个<MenuItem>绑定onClick事件，避免逻辑冲突。

修改后的完整代码：

import * as React from 'react';
import { Select, MenuItem } from '@mui/material';
import { useState } from 'react';

const SampleMenuList = (props) => {
    // 初始化value可设为空字符串，或默认选中第一个选项：props.filters[0]
    const [value, setValue] = useState('');

    const handleSelectChange = (event) => {
        const selectedValue = event.target.value;
        setValue(selectedValue);
        // 同步选中值到父组件
        props.onFilterChange(selectedValue);
    };

    return (
        <Select value={value} onChange={handleSelectChange}>
            {props.filters.map((c, idx) => {
                const labelId = `checkbox-list-label-${idx}`;
                return (
                    <MenuItem
                        key={idx}
                        id={labelId}
                        value={c}
                    >
                        {c}
                    </MenuItem>
                );
            })}
        </Select>
    );
};

export default SampleMenuList;

如果需要默认选中第一个选项，只需把useState的初始值改为props.filters[0]即可（注意确保props.filters不为空）。

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