时间戳

首页 > 解决方案 > 使用 {react-select} 时无法读取未定义的属性“名称”

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

问题描述

我刚开始接触 reactJS 和前端

我为我的下拉列表添加了 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)}
      />
    );
  }

错误

未捕获的类型错误：无法读取 Movies.dataChange 中未定义的属性“名称”

标签： reactjsreact-select

解决方案

您希望react-select´sonChange方法中的第一个参数是一个event对象，但事实并非如此。

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

  • action: 触发变化的动作
  • name: 使用prop赋予Select组件的名称。name

因此，如果您想使用name：

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

源代码中的参考

推荐阅读