Die Material-UI-Auswahlkomponente zeigt den ausgewählten Wert nicht korrekt an

Question

Ich habe eine ausgewählte Komponente und kann die Menüelemente sehen und auswählen, aber die Komponente zeigt den ausgewählten Wert nicht an. Seine Handler-Funktion funktioniert einwandfrei, denn wenn ich ein Element auswähle, wird der Wert in der Datenbank aktualisiert

Das Folgende ist der Codeteil:

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>
    )
}

Ich habe versucht, den Typ des Objektschlüssels von einer Zeichenfolge in eine Zahl zu ändern, aber es hat nicht geholfen

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} />