时间戳

首页 > 解决方案 > 从反应选择表单中检索值数组

javascript - 从反应选择表单中检索值数组

问题描述

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

reactjs 站点显示这在选择标记下是可能的，但不是如何访问这些值...

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

标签： javascriptnode.jsreactjsreactstrap

解决方案

这个答案有一些可能的方法可以使用从初始数据中选择项目，但是在您的情况下，将值返回数组形式index可能是最简单的：split

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

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

推荐阅读