從反應 select 表單中檢索值數組

Question

所以基本上我正在嘗試使用 select 下拉框創建一個表單。 我正在嘗試通過 value 屬性將一組值發送到 onChange function ，但它只是給了我一個字符串。 如何將值傳回並以數組樣式訪問它們？

reactjs 站點顯示這在 select 標簽下是可能的，但不是如何訪問這些值...

https://reactjs.org/docs/forms.html#the-select-tag

    <Input type="select" name="university" id="university" onChange={this.onSelect}>

    {this.props.universities.universities.map(({ idUniversity, name}) => (
       <option key ={idUniversity} value = {[idUniversity , name]}>
         {name}
       </option>
    ))}

    </Input>

    onSelect = (e) => {
        console.log(e.target.value[0] + " " + e.target.value[1] );
        this.setState({
            university_id: e.target.value[0],
            university_name: e.target.value[1]
        });
    }

當我運行它時，e.target.value[0] 給了我 {[idUniversity, name]} 給出的整個字符串的第一個字符。

例如，數組應該是 [2, University of Central Florida]，但 e.target.value[0] 將只返回 [

Answer 1

這個答案有一些可能的方法來解決這個問題，使用 select 的index來處理初始數據中的項目，但是在你的情況下，將值split回數組形式可能是最簡單的：

onSelect = (e) => {
    const [university_id, university_name] = e.target.value.split(',');

    this.setState({
        university_id,
        university_name,
    });
}