react-select 多个选项

Question

我正在尝试使用 multiple 选项为简单的 select 设置 react-select 组件，但我无法使其正常工作，即使它已按照文档所说的进行了所有设置。当 multi 为 false 时，Select 按预期一次与一个 value 一起工作，但是当我设置 multi={true} 时，它显示 value 为 undefined.

当我放弃 handleChange() event.target.value 时，它也会提供 undefined，所以这就是为什么我刚刚使用 event.value 来获取对象属性的原因。我还是 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。

Answer 2

在下面的示例中，您必须检查旧状态并更新为新值，但我们不能直接更改状态，因此我们必须使用新值才能在

中使用它

setState()

https://codepen.io/KhogaEslam/pen/PayjXW

class FlavorForm extends React.Component {
  constructor(props) {
    super(props)
    this.state = { value: [''] }

    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  handleChange(event) {
    let newVal = event.target.value
    let stateVal = this.state.value

    console.log(stateVal)
    console.log(newVal)

    stateVal.indexOf(newVal) === -1
      ? stateVal.push(newVal)
      : stateVal.length === 1
        ? (stateVal = [])
        : stateVal.splice(stateVal.indexOf(newVal), 1)

    this.setState({ value: stateVal })
  }

  handleSubmit(event) {
    alert('Your favorite flavor is: ' + this.state.value)
    event.preventDefault()
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Pick your favorite La Croix flavor:
          <select
            multiple={true}
            value={this.state.value}
            onChange={this.handleChange}
          >
            <option value="" />
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>
        </label>
        <input type="submit" value="Submit"/>
      </form>
    )
  }
}

ReactDOM.render(
  <FlavorForm />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


<div id="root"></div>

react-select 多个选项

react-select multiple option

javascript

reactjs

react-select