React: Wie zu Child-Komponente Ereignisse zu hören

Question

Ich habe eine Komponente, sagen wir, es enthält ein Formular. Das Formular enthält untergeordnete Komponenten, die im Wesentlichen UI-Widgets zum Ausgeben von Texteingaben und zum Auswählen von Menüs sind.

Die Auswahlmenü-Komponenten sind ein bisschen schick und führen einige Zustandsüberwachungen mit dem onChange-Ereignis durch.

Meine Frage ist; Wie hooke ich in das onChange-Ereignis für ein Auswahlmenü von der übergeordneten (Formular-) Komponente ein? Ich kann Änderungen nicht durch Requisiten weitergeben, da ich onChange bereits in der Auswahlkomponente angegeben habe, und ich möchte sie nicht überschreiben.

Beispiel:

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

Mit <Select onChange={...} /> die <select onChange={...} /> innerhalb Wählen des render Methode nicht außer Kraft setzen. Die <Select/> Komponente und die <select/> Komponente, die es darstellt, haben völlig verschiedene Sätze von props.

Die einfachste Art zu tun, was Sie wollen, denke ich, ist Ihre handleChange Methodenaufruf this.props.onChange zu haben. Sie können es einfach passieren die gleiche e Argument handleChange erhält: „ich eine Komponente haben, lassen Sie uns sagen, dass es ein Formular enthält“

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> 
    ); 
    } 
});