Reactjs के साथ Select2 का उपयोग कैसे करें?

Question

मैं इस

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

तरह निर्भर क्षेत्रों है, तो मैं 5 <List/> components.How था मैं जोड़ने Select2 प्रत्येक component.I के लिए googled online.But किसी भी काम कर समाधान नहीं मिल सका है।

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

आप प्रतिक्रिया का उपयोग कर रहे हैं, इसलिए आपको jQuery प्लगइन्स बजाय घटकों प्रतिक्रिया की तलाश में बेहतर होगा। आप eaxmple react-select के लिए उपयोग कर सकते हैं, जो कि चयन 2 के समान है।

Answer 2

हम this wrapper उपयोग कर रहे हैं, लेकिन वहाँ उसके चारों ओर भी कई समस्याएं हैं।

सबसे पहले, आप कोड जहां यह this issue की वजह से, NodeJS में प्रयोग किया जाता है परीक्षण नहीं कर सकते। दूसरी बात हमें defaultValue पैरामीटर के माध्यम से विभिन्न चयन 2 घटकों के प्रारंभ में समस्याएं थीं। इन तत्वों में से केवल एक (यादृच्छिक रूप से) initalized था।

इसलिए हम यह डंप और react-select जल्द ही साथ बदलने के लिए जा रहा है।

संपादित करें: हम react-select साथ react-select2-wrapper बदल दिया। यह हमारे लिए बहुत अच्छा काम करता है।

Answer 3

आप refs [docs], आप componentDidMount समारोह में अपनी refs विशेषता के माध्यम से नोड पहुँच सकते हैं और पारित 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> 
    ); 
    } 
}); 

मैं नहीं मानता कि इस तरह से "प्रतिक्रिया है, "लेकिन अगर आप react-select या कुछ अन्य टूल का उपयोग नहीं करना चाहते हैं तो इससे मदद मिल सकती है।