React: Как прослушивать события дочерних компонентов

Question

У меня есть компонент, допустим, он содержит форму. Форма имеет дочерние компоненты, которые по существу являются виджетами пользовательского интерфейса для вывода текстовых входов и выбора меню.

Компоненты меню выбора немного причудливы и поддерживают некоторое состояние, используя событие onChange.

Мой вопрос: как я могу подключиться к событию onChange для меню выбора из компонента parent (form)? Я не могу передать значение через реквизит, поскольку у меня уже есть onChange, указанный внутри компонента select, и я не хочу его переопределять.

Пример:

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.

Самый простой способ сделать то, что вы хотите, я думаю, состоит в том, чтобы вызвать метод выбора handleChangethis.props.onChange. Вы можете просто передать это тот же самый аргумент ehandleChange получает:

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