React multi-select selected 值未定义

Question

我正在使用 this 组件来制作一个反应多 select。当我使用正常的 select 时，如果工作正常。我有以下代码。

handleChange = (selectedOption) => {
    this.setState({ selectedOption });
    console.log(`Selected: ${selectedOption.label}`);
  }
  render() {
    return (
      <Select
        name="form-field-name"
        value={this.state.selectedOption.value}
        onChange={this.handleChange}
        options={[
          { value: 'one', label: 'One' },
          { value: 'two', label: 'Two' },
        ]}
      />
    );
  }

但是当我添加时，multi={true} 它在控制台中给出了 undefined。我究竟做错了什么？属性还有什么要加的吗？

加上 select 框中的值不会改变。这是一个例子- https://jsfiddle.net/69z2wepo/94309/

Answer 1

我的猜测是 selectedOption 在 multi={true} 的情况下将是一个数组。所以原因 selectedOption.label 将是未定义的。但是像 selectedOption[0].label 这样的东西应该可以工作。

Answer 2

如果您阅读链接到的文档，您会发现以下语句 here

The onChange event provides an array of selected options or a comma-separated string of values (eg "1,2,3") if simpleValue is true

因此，在您的情况下，您必须将数组作为输入，因此您的 handleChange 将类似于

handleChange = (selectedOptions) => {
  this.setState({ selectedOptions });
  selectedOptions.forEach( selectedOption => 
    console.log( `Selected: ${selectedOption.label}` ) 
  );
}

然后您的渲染也会更改为

render() {
  return (
    <Select
      name="form-field-name"
      value={this.state.selectedOptions}
      onChange={this.handleChange}
      options={[
        { value: 'one', label: 'One' },
        { value: 'two', label: 'Two' },
      ]}
    />
  );
}

因为你想传递选择的值或undefined。如果该值除了选项中的属性 value 之外还有其他任何值，则您需要向组件提供 valueKey 属性，但默认设置为"value" 所以在你的情况下你似乎不需要它。

你能找到的道具here

可在此处找到工作版本（请注意，在您的 fiddle 和您的示例中，缺少 multi 道具）

class Hello extends React.Component {
  handleChange(selectedOptions) {
    this.setState({ value: selectedOptions });
  }
  render() {
    return (
      <Select
        name="form-field-name"
        value={this.state && this.state.value}
        multi={true}
        onChange={(...args) => this.handleChange(...args)}
        options={[
          { value: 'one', label: 'One' },
          { value: 'two', label: 'Two' },
        ]}
      />
    );
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/classnames/2.2.5/index.js"></script>
<script src="https://unpkg.com/react-input-autosize@2.0.0/dist/react-input-autosize.js"></script>
<script src="https://unpkg.com/react-select/dist/react-select.js"></script>
<link rel="stylesheet" href="https://unpkg.com/react-select/dist/react-select.css" type="text/css" />

<div id="container"></div>

React multi-select selected 值未定义

React multi-select selected value undefined

javascript

reactjs

react-select