2

我正在尝试使用选项设置react-select简单的组件，但即使它按照文档所说的那样设置，我也无法让它工作。什么时候，一次按预期工作，但是当我设置它时，它显示为.selectmultiplemultifalseSelectvaluemulti={true}valueundefined

当我放弃时，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.

4

2 回答 2

2

您的代码似乎存在一些问题。首先，onChange 回调将直接传入值而不是事件。其次，必须将对象传递给setState.

您可以尝试将handleChange方法更改为以下方法吗？

handleChange(value) {
  this.setState({ value });
}

您还可以在此处遵循 Multiselect 用法的示例代码。

于 2016-11-26T17:30:41.487 回答
1

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

设置状态（）

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>

于 2018-06-27T10:03:41.143 回答