Komponen pilih UI Bahan tidak memaparkan nilai yang dipilih dengan betul

Question

Saya mempunyai komponen terpilih dan saya boleh melihat item menu dan memilihnya, tetapi komponen itu tidak memaparkan nilai yang dipilih. Fungsi pengendalinya berfungsi dengan baik kerana apabila saya memilih item nilai dalam pangkalan data dikemas kini

Berikut ialah bahagian kod:

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

Saya cuba menukar jenis kekunci objek daripada rentetan kepada nombor tetapi ia tidak membantu

Answer 1

Anda menghantar nilai kepada komponen.

Buat pembolehubah keadaan dan kemas kini keadaan apabila nilai berubah.

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

Kemudian kemas kini status dalam pemegangPilih seperti yang ditunjukkan di bawah

handleSelect(e) {
     setValue(e);
}

Akhir sekali, hantar nilai yang dikemas kini dalam komponen pemilihan

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