प्रतिक्रिया: बाल घटक घटनाओं को कैसे सुनें

Question

मेरे पास एक घटक है, मान लें कि इसमें एक फॉर्म है। इस फॉर्म में बाल घटक हैं जो टेक्स्ट इनपुट को आउटपुट करने और मेनू चुनने के लिए अनिवार्य रूप से यूआई विजेट हैं।

चुनिंदा मेनू घटक थोड़ा फैंसी हैं और ऑन चेंज इवेंट का उपयोग करके कुछ राज्य बनाए रखते हैं।

मेरा प्रश्न है; मैं अभिभावक (फॉर्म) घटक से एक चयन मेनू के लिए ऑन चेंज ईवेंट में कैसे लगा सकता हूं? मैं प्रोप के माध्यम से चार्ज नहीं कर सकता क्योंकि मेरे पास पहले से ही चयन घटक के अंदर निर्दिष्ट चेंज है और मैं इसे ओवरराइड नहीं करना चाहता हूं।

उदाहरण:

var Form = React.createClass({ 

    handleSelectChange: function(){ 
     // Do something when <Select /> changes 
    }, 

    render: function() {  

     var selectMenuOptions = [ 
      {label: 'Choose...', value: ''}, 
      {label: 'First option', value: 'one'}, 
      {label: 'Second option', value: 'two'} 
     ]; 
     return (
      <form> 
       <Select name="selectMenu" id="selectMenu" options={selectMenuOptions} /> 
      </form> 
     ); 
     } 
}); 

var Select = React.createClass({ 

    getDefaultProps: function() { 
     return { 
      options: [], 
      className: "select" 
     }; 
     }, 

    getInitialState: function() { 
     return { 
      buttonText: 'Loading...', 
      defaultValue: null 
     }; 
    }, 

    handleChange: function (e) { 
     // Update buttonText state 
    }, 

    render: function() { 

     return (
      <div className={this.props.className}> 
       <div className="select__button">{this.state.buttonText}</div> 
       <select className="select__selector" 
         ref="select" 
         onChange={this.handleChange}> 
         {this.props.options.map(function(option, i){ 
          return (<Option option={option} key={i} />); 
         })} 
       </select> 
      </div> 
     ); 
    } 
}); 

Answer 1

का उपयोग <Select onChange={...} /><select onChange={...} /> चयन के render विधि के अंदर ओवरराइड नहीं करेगा। <Select/> घटक और <select/> घटक यह प्रस्तुत करता है props के पूरी तरह से अलग सेट है।

आप जो चाहते हैं उसे करने का सबसे आसान तरीका, मुझे लगता है कि, आपके चयन का handleChange विधि कॉल this.props.onChange है। तुम बस इसे पारित कर सकते हैं एक ही e तर्क handleChange प्राप्त करता है: "। मैं एक घटक है, मान लें कि यह एक फ़ॉर्म है चलो"

var Form = React.createClass({ 
    handleSelectChange: function(){ 
    // Do something when <Select /> changes 
    }, 

    render: function() { 
    // ... 
    return (
     <form> 
     <Select name="selectMenu" 
      id="selectMenu" 
      options={selectMenuOptions} 
      onChange={this.handleSelectChange} /> 
     </form> 
    ); 
    } 
}); 

var Select = React.createClass({ 
    // ... 

    handleChange: function (e) { 
    if (this.props.onChange) { 
     this.props.onChange(e); 
    } 
    // Update buttonText state 
    }, 

    render: function() { 
    return (
     <div className={this.props.className}> 
     <div className="select__button">{this.state.buttonText}</div> 
     <select className="select__selector" 
      ref="select" 
      onChange={this.handleChange}> 
      {this.props.options.map(function(option, i){ 
      return (<Option option={option} key={i} />); 
      })} 
     </select> 
     </div> 
    ); 
    } 
});