javascript - react 多选选定值未定义

我正在使用this组件进行反应多选。当我使用正常选择时，如果效果很好。我有以下代码。

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。我究竟做错了什么？还有什么要添加到属性中的吗？

加上选择框内的值不变。这是一个示例-https://jsfiddle.net/69z2wepo/94309/

最佳答案

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


  如果simpleValue为true，则onChange事件将提供一个选定选项的数组或一个逗号分隔的值字符串（例如“ 1,2,3”）


因此，在您的情况下，您必须将数组作为输入，因此您的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

在这里可以找到可用的版本（请注意，在您的小提琴和示例中，缺少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/[email protected]/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>

关于javascript - react 多选选定值未定义，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47726172/