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