Wie benutzt man Select2 mit Reactjs?

Question

Ich habe veränderliche Felder wie diese

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

Wenn ich 5 <List/> components.How füge ich Select2 zu jedem component.I gegoogelt online.But keine funktionierende Lösung gefunden. Reagieren Komponenten suchen, anstatt jQuery Plugins

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

Da Sie reagieren verwenden, würden Sie besser dran. Sie können für Beispiel react-select verwenden, die Select2 ziemlich ähnlich ist.

Answer 2

Wir verwenden this wrapper, aber es gibt zu viele Probleme in der Umgebung.

Zunächst können Sie Code nicht testen, wo es in NodeJS verwendet wird, wegen this issue. Zweitens hatten wir Probleme mit der Initialisierung verschiedener select2 Komponenten über defaultValue Parameter. Nur einer (zufällig) dieser Elemente wurde initialisiert.

Deshalb werden wir es bald dump und ersetzen mit react-select.

BEARBEITEN: Wir ersetzten react-select2-wrapper durch react-select. Es funktioniert gut für uns.

Answer 3

Wenn Sie mit refs [docs], können Sie den Knoten über sein refs Attribut in der componentDidMount Funktion zugreifen können und passieren, dass zu 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> 
    ); 
    } 
}); 

Ich glaube nicht, dass dies die „React ist Art und Weise, "Dies kann jedoch hilfreich sein, wenn Sie nicht react-select oder ein anderes Tool verwenden möchten.