Material UI Select组件选中值不显示问题求助

你的问题出在Select组件的value绑定不匹配：

• MenuItem的value设置的是键值（"1"/"2"/"3"）
• 但你给Select的value绑定的是values[this.props.data.code]，也就是翻译后的文本内容（比如"SAMEWINDOW"）

Material UI的Select组件是通过对比自身value和MenuItem的value来确定选中状态的，两者类型/值不匹配时，就会出现能选择但不显示选中值的情况——虽然你的onChange逻辑正常，数据库也更新了，但组件自身找不到对应的匹配项，所以无法渲染选中状态。

修复代码 #

把Select的value改成直接绑定this.props.data.code即可：

handleSelect(event){
    this.props.handleChange(event);
}

render() {

    const values= {
        "1": translation.getText("SAMEWINDOW"),
        "2": translation.getText("NEWWINDOW"),
        "3": translation.getText("NEWTAB")
    };

    return(
        <Select
            name="code"
            value={this.props.data.code}
            onChange={this.handleSelect}
        >
            {Object.keys(values).map((item) => (
                <MenuItem value={item}>{values[item]}</MenuItem>
            ))}
        </Select>
    )
}

这样Select的value和MenuItem的value都是键值（"1"/"2"/"3"），组件就能正确匹配并显示选中的选项文本了。

内容的提问来源于stack exchange，提问作者damics.mark