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（）

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

错误

未捕获的TypeError：无法读取未定义的属性“名称” 在Movies.dataChange

Answer 1

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

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 2

您期望react-select的{{1}}方法中的第一个参数是onChange对象，但不是。

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

object：触发更改的动作
action：使用name道具赋予Select组件的名称。

因此，如果您想使用name：

name

Reference in source code

使用{react-select}时无法读取未定义的属性“名称”

2 个答案: