Come usare Select2 con Reactjs?

Question

ho campi dipendenti come questo

<List> 
    <select> 
     <option></option> 
     <option></option> 
    </select> 
    <select> 
     <option></option> 
     <option></option> 
    </select> 
    <input /> 
    </List> 

Se dovessi 5 <List/> components.How fare aggiungo Select2 ad ogni component.I Googled online.But non abbiamo trovato nessuna soluzione di lavoro.

Code below for react-select.Getting error TypeError: event.target is undefined.

var React = require('react'); 
var ReactDOM = require('react-dom'); 
var Select = require('react-select'); 

var Page = React.createClass({ 

    getInitialState: function() { 
     return { 
      firstValue: '' 
     } 
    }, 

    handleFirstLevelChange : function (event) { 
     this.setState({ 
      firstValue: event.target.value 
     }); 
    }, 
    render : function(){ 

     var options = [ 
      { value: '', label: 'Select an option' }, 
      { value: 'one', label: 'One' }, 
      { value: 'two', label: 'Two' } 
     ]; 

     return (<Select 
      value={this.state.firstValue} 
      options={options} 
      onChange={this.handleFirstLevelChange} 
      />) 
    } 
}); 

ReactDOM.render(<Page />, document.getElementById('root')); 

Answer 1

Dal momento che si sta utilizzando Reagire, si sarebbe meglio alla ricerca di Reagire componenti piuttosto che i plugin jQuery. È possibile utilizzare per eaxmple react-select, che è molto simile a Select2.

Answer 2

Stiamo usando this wrapper, ma ci sono troppi problemi intorno ad esso.

Prima di tutto, non è possibile testare il codice in cui viene utilizzato in NodeJS, a causa di this issue. In secondo luogo abbiamo avuto problemi con l'inizializzazione di vari componenti select2 tramite il parametro defaultValue. Solo uno (a caso) di questi elementi era initalizzato.

Quindi andiamo a scaricarlo e sostituire con react-select presto.

MODIFICA: Abbiamo sostituito react-select2-wrapper con react-select. Funziona alla grande per noi.

Answer 3

Se stai usando refs [docs], è possibile accedere al nodo tramite il suo attributo refs nella funzione componentDidMount e passare che a select2():

var Select = React.createClass({ 
    handleChange: function() { 
    this.prop.onChange(
     this.refs.myRef.value 
    ); 
    }, 

    componentDidMount: function() { 
    // Call select2 on your node 
    var self = this; 
    var node = this.refs.myRef; // or this.refs['myRef'] 
    $(node) 
     .select2({...}) 
     .on('change', function() { 
     // this ensures the change via select2 triggers 
     // the state change for your component 
     self.handleChange(); 
     }); 
    }, 

    render: function() { 
    return (
     <select 
     ref="myRef" 
     onChange={this.handleChange}> 
     // {options} 
     </select> 
    ); 
    } 
}); 

non credo che questo è il modo "Reagire, "ma questo può aiutare se non si desidera utilizzare react-select o qualche altro strumento.