Material UI选择组件未正确显示选中的值

Question

我有一个选择组件，我可以看到菜单项并选择它们，但组件不显示所选的值。它的处理函数工作正常，因为当我选择一个项目时，数据库中的值会更新

以下是其中的代码部分：

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={values[this.props.data.code]}
            onChange={this.handleSelect}
        >
            {Object.keys(values).map((item) => (
                <MenuItem value={item}>{values[item]}</MenuItem>
            ))}
        </Select>
    )
}

我尝试将对象键的类型从字符串更改为数字，但没有帮助

Answer 1

您正在将值发送到组件。

创建一个状态变量，并在值发生变化时更新状态。

例如 - const [value, setValue] = useState("");

然后在handleSelect中更新状态，如下所示

handleSelect(e) {
     setValue(e);
}

最后，在选择组件中发送更新后的值

<select
     name="code"
     value={values[this.props.data.code]}
     menuItem = {value}
     onChange={this.handleSelect} />