Question

我尝试使用react-select选项为简单select设置multiple组件，但即使它设置了一切，我也无法使其正常运行正如文档所说。当multi为false时，Select一次只能使用一个value，但当我设置multi={true}时，value显示为undefined {1}}。

当我放弃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 });
}

您还可以按照Multiselect用法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>

反应选择多个选项

2 个答案: