2

コンポーネントをオプション付きreact-selectでシンプルに設定しようとしていますが、ドキュメントが言うようにすべてが設定されているにもかかわらず、動作させることができません。の場合、一度に1 つずつ意図したとおりに動作しますが、設定すると のように表示されます。selectmultiplemultifalseSelectvaluemulti={true}valueundefined

私が与えると、handleChange() event.target.valueそれも与えられるので、 obj プロパティを取得する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います。

4

2 に答える 2

2

コードにいくつか問題があるようです。まず、onChange コールバックは、イベントの代わりに値で直接渡されます。次に、オブジェクトを に渡す必要がありsetStateます。

handleChange代わりに、メソッドを次のように変更してみてください。

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

Multiselect の使用法については、こちらのサンプル コードを参照することもできます。

于 2016-11-26T17:30:41.487 に答える