Le composant de sélection de l'interface utilisateur du matériau n'affiche pas correctement la valeur sélectionnée

Question

J'ai un composant de sélection et je peux voir les éléments de menu et les sélectionner, mais le composant n'affiche pas la valeur sélectionnée. Sa fonction de gestionnaire fonctionne bien car lorsque je sélectionne un élément, la valeur dans la base de données est mise à jour

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

J'ai essayé de changer le type de clé d'objet de chaîne en nombre mais cela n'a pas aidé

Answer 1

Vous envoyez la valeur au composant.

Créez une variable d'état et mettez à jour l'état lorsque la valeur change.

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

Mettez ensuite à jour le statut dans handleSelect comme indiqué ci-dessous

handleSelect(e) {
     setValue(e);
}

Enfin, envoyez la valeur mise à jour dans le composant de sélection

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