React中如何设置Select2组件的选中状态？

Question

我有一个包含 npm 包的 React 应用程序：

import Select2 from 'react-select2-wrapper';

我的 Select2 组件如下所示：

<Select2
    options={{
        minimumResultsForSearch: Infinity
    }}
    data={[
        { text: '...', id: "" },
        { text: 'Edit', id: "edit" },
        { text: 'Duplicate', id: "duplicate" }
    ]}
    onChange={this.executeSelectedOption.bind(this)}
 />

我想单击一个按钮并让它更改 Select2 组件的选定值 - 我该怎么做？

Answer 1

react-select2-wrapper has value 属性

var Select = React.createClass({
  getInitialState() {
    return { value: null }
  },

  handleClick(value) {
    this.setState({ value });
  },

  executeSelectedOption() {},

  render() {
    return <div>
      <p>
        <button onClick={ this.handleClick.bind(this, '') }>Select Empty</button>  
        <button onClick={ this.handleClick.bind(this, 'edit') }>Select Edit</button>
        <button onClick={ this.handleClick.bind(this, 'duplicate') }>Select Duplicate</button>
      </p>

      <Select2
        value={ this.state.value }

        options={{
          minimumResultsForSearch: Infinity
        }}

        data={[
          { text: '...', id: "" },
          { text: 'Edit', id: "edit" },
          { text: 'Duplicate', id: "duplicate" }
        ]}
        onChange={this.executeSelectedOption.bind(this)}
       />
    </div>
  }
});

Example

React中如何设置Select2组件的选中状态？

How to set the selected state of Select2 component in React?

reactjs

select2