Question

我正在使用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/

Answer 1

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

Answer 2

如果您要阅读与之关联的文档，您会发现以下语句here

如果simpleValue为true，则onChange事件提供一系列选定的选项或以逗号分隔的值字符串（例如＆＃34; 1,2,3＆＃34;）

所以，在你的情况下，你必须把一个数组作为输入，你的savedValues.get(i)就是这样的

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上设置，因此在您的如果你似乎不需要它。

你可以找到道具here

可在此处找到工作版本（请注意，在您的小提琴和示例中，"value"道具失踪了）

＆＃13;

multi

＆＃13;

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')
);

＆＃13;

React多选所选值undefined

2 个答案: