从反应选择表单中检索值数组答案

【问题标题】：Retrieving array of values from react select form从反应选择表单中检索值数组
【发布时间】：2020-01-22 23:26:51
【问题描述】：

所以基本上我正在尝试创建一个带有选择下拉框的表单。我试图通过 value 属性将一组值发送到 onChange 函数，但它只是给了我一个字符串。如何将值传回并以数组样式访问它们？

reactjs 网站显示在 select Tag 下这是可能的，但不是如何访问这些值...

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] 将只返回 [

【问题讨论】：

可能是因为您忘记将multiple 属性添加到<select> 元素？
@OriolGrau 如果我添加它，它会将下拉选择器更改为多选框。不幸的是，它仍然没有将 value 属性更改为数组，所以同样的问题。
let [id, name] = e.target.value.split(',') 是否适合您？我正在尝试看看是否有其他方法

标签： javascript node.js reactjs reactstrap

【解决方案1】：

This answer 有一些可能的方法可以使用index 从您的初始数据中选择项目，但是在您的情况下，将split 值重新转换为数组形式可能是最简单的：

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

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

【讨论】：