javascript - react 选择多个选项

Question

我正在尝试使用 multiple 选项为简单的 select 设置 react-select 组件，但我无法让它工作，即使正如文档所说，一切都已设置。当 multi 为 false 时，Select 按预期一次使用一个 value，但是当我设置 multi={true} 它显示 value 为 undefined。

当我在 handleChange() event.target.value 中给出时，它也会给出 undefined 所以这就是为什么我刚刚使用 event.value 获取 obj 属性。我还是 React 的新手，所以如果我在这里做错了任何关于 state 的提示，我将不胜感激 -_-

class StatisticsFilter extends Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState(event.value);
  }

const options =
[
  {
    value: 'foo', label: 'Foo'
  },
  {
    value: 'bar', label: 'Bar'
  },
  {
    value: 'baz', label: 'Baz'
  }
];

  render() {
    return (
          <Select
              value={this.state.value}
              name="filter__statistics"
              options={options}
              onChange={this.handleChange}
              multi={true}
          />
    );
  }
}

使用 react-select v. 1.0.0rc。

Answer 1

您的代码似乎有一些问题。首先，onChange 回调将直接传入值而不是事件。其次，必须将对象传递给 setState。

您能否尝试将您的 handleChange 方法更改为以下方法？

handleChange(value) {
  this.setState({ value });
}

您还可以按照多选用法的示例代码 here .