Reakcja: Jak odsłuchiwać zdarzenia komponentu potomnego

Question

Mam komponent, powiedzmy, że zawiera formularz. Formularz zawiera komponenty podrzędne, które są w zasadzie widżetami interfejsu użytkownika do wprowadzania tekstu i wybierania menu.

Wybrane komponenty menu są nieco fantazyjne i powodują pewne utrzymywanie stanu za pomocą zdarzenia onChange.

Moje pytanie brzmi; jak podłączyć się do zdarzenia onChange dla wybranego menu z komponentu nadrzędnego (formularza)? Nie mogę przejść na Zmień przez rekwizyty, ponieważ już mam na Zmień wymieniony wewnątrz komponentu select i nie chcę go przesłonić.

Przykład:

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

Korzystanie <Select onChange={...} /> nie zastąpi <select onChange={...} /> wewnątrz Wybierz za render metody. Komponent <Select/> i komponent, który wykonuje, mają zupełnie różne zestawy props.

Najprostszym sposobem zrobienia tego, co chcesz, wydaje mi się, że masz wywołanie metody Select handleChangehandleChange. można po prostu przekazać go tak samo e argumentem handleChange otrzymuje: „Mam komponent, powiedzmy, że zawiera ona formę”

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