使用 {react-select} 时无法读取未定义的属性 'name'

Question

我刚开始接触JS和前端

我为下拉列表添加了 react-select npm，如下所示，在添加 react-select 之前一切正常。 如何在Select中定义名称？

<div className="container">
            <div className="row">
              <div className="col-md-4" />
              <div className="col-md-4">
                <Select
                  options={this.state.allGenres}
                  onChange={this.props.onDataChange}
                  name="genre"
                />
              </div>
              <div className="col-md-4" />
            </div>
          </div>

这是我的数组，

 var Data = response.data;
    const map = Data.map((arrElement, index) => ({
      label: arrElement,
      value: index
    }));

示例：

[
    {
        "label": "Action",
        "value": 0
    },
    {
        "label": "Comedy",
        "value": 1
    },
    {
        "label": "Documentary",
        "value": 2
    }
]

此处出现错误消息，

   dataChange(ev, action) {
    this.setState({
      [ev.target.name]: ev.target.value
    });
  }

渲染()

 render() {
    return (
      <Movie
        onPostData={this.postData.bind(this)}
        onDataChange={this.dataChange.bind(this)}
      />
    );
  }

错误

Uncaught TypeError: Cannot read property 'name' of undefined at Movies.dataChange

Answer 1

您希望 react-select 的 onChange 方法中的第一个参数是 event 对象，但它不是。

第一个参数是选定的选项（如果您设置了 isMulti，则为选项）。还有第二个参数是具有以下属性的 object：

action：触发更改的操作
name：使用 name 属性为 Select 组件指定的名称。

所以如果你想使用 name:

onDataChange={(value, action) => {
    this.setState({
        [action.name]: value
    })
}}

Reference in source code

Answer 2

我解决了这个方法，它奏效了。

handleSelectChange: function(name) {
    return function(newValue) {
        // perform change on this.state for name and newValue
    }.bind(this);
  },

render: function() {
   return (
      <div>
        <Select ...attrs...  onChange={this.handleSelectChange('first')} />
        <Select ...attrs...  onChange={this.handleSelectChange('second')} />
      </div>);
  }

Answer 3

这是获取所选选项的值以及输入的名称的方法。

有关详细信息，check this issue on Github。


handleChange = (selectedOptions, actionMeta) => {
    const inputName = actionMeta.name;
    let selectedValues;

    if (Array.isArray(selectedOptions)) {
        // An array containing values of the selected options (like: ["one", "two", "three"]
        selectedValues = selectedOptions.map(option => option.value);

        // OR, use this if you want the values of the selected options as a string separated by comma (like: "one,two,three")
        selectedValues = selectedOptions.map(option => option.value).join(",");

    } else {
        // An array containing the selected option (like: ["one"])
        selectedValues = [selectedOptions.value];

        // OR, use this if you want the value of the selected option as a string (like: "one")
        selectedValues = selectedOptions.value;
    }

    // Do whatever you want with the selected values
    //..
    this.setState({
        [inputName]: selectedValues
    });
}

<Select
    name="genre"
    options={this.state.allGenres}
    onChange={this.handleChange}
/>

使用 {react-select} 时无法读取未定义的属性 'name'

when using {react-select} Cannot read property 'name' of undefined

reactjs

react-select

使用 {react-select} 时无法读取未定义的 属性 'name'

when using {react-select} Cannot read property 'name' of undefined

reactjs

react-select

使用 {react-select} 时无法读取未定义的属性 'name'