Jak używać Select2 z Reactjs?

Question

mam pól zależnych jak ten

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

Gdybym miał 5 <List/> components.How mogę dodać Select2 każdemu component.I google online.But nie mógł znaleźć żadnego rozwiązania roboczą.

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

Ponieważ używasz React, byłbyś lepiej szuka React komponenty zamiast wtyczek jQuery. Możesz użyć dla eaxmple react-select, który jest podobny do Select2.

Answer 2

Używamy this wrapper, ale jest zbyt wiele problemów wokół niego.

Przede wszystkim nie można przetestować kodu, w którym jest używany w NodeJS, z powodu this issue. Po drugie mieliśmy problemy z inicjalizacją różnych komponentów select2 za pomocą parametru defaultValue. Tylko jeden (losowo) z tych elementów został zinicjalizowany.

Dlatego wkrótce wyrzucimy go i zastąpimy numerem react-select.

EDYCJA: Zastąpiliśmy react-select2-wrapper z react-select. Działa to doskonale dla nas.

Answer 3

Jeśli używasz refs [docs], można uzyskać dostęp za pośrednictwem swojego węzeł atrybutu refs w funkcji componentDidMount i przekazać, że do 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> 
    ); 
    } 
}); 

Nie wierzę w ten sposób „React, "ale może to pomóc, jeśli nie chcesz używać react-select lub innego narzędzia.