Wie wird der ausgewählte Status der Select2-Komponente in React festgelegt?

Question

Ich habe eine Applikation reagieren, die das NPM-Paket beinhaltet:

import Select2 from 'react-select2-wrapper'; 

Meine Select2 Komponente wie folgt aussieht:

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

Ich möchte eine Schaltfläche klicken und haben es den Wert des Select2 ausgewählt ändern Komponente - wie mache ich das?

Answer 1

react-select2-wrapper hat value Attribut

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