材质 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

您正在向组件发送值。

创建一个状态变量，当值被改变时更新状态。

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

则处于handleSelect更新状态，例如

handleSelect(e) {
setValue(e);
}

最后，在select组件上发送更新的值

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

Answer 2

根据代码，您似乎正在使用类组件，所以试着定义一个状态来存储选中的值这样你就可以显示它了，

state = {
selected: null
}
handleSelect(event) {
this.props.handleChange(event);
this.setState({ selected: 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]}
menuItem={this.state.selected}
onChange={this.handleSelect}
>
{Object.keys(values).map((item) => (
<MenuItem value={item}>{values[item]}</MenuItem>
))}
</Select>
)
}

你可以从这里使用带有类组件的mui来引用选择框演示。https://codesandbox.io/s/425lm2479?file=/demo.js