Phản ứng: Cách nghe các sự kiện thành phần con

Question

Tôi có một thành phần, giả sử nó có chứa một biểu mẫu. Biểu mẫu này có các thành phần con mà chủ yếu là các tiện ích UI để xuất các đầu vào văn bản và các menu chọn.

Các thành phần menu chọn là một chút ưa thích và thực hiện một số trạng thái duy trì bằng sự kiện onChange.

Câu hỏi của tôi là; làm thế nào để móc vào sự kiện onChange cho một menu chọn từ thành phần cha mẹ (form)? Tôi không thể vượt qua onChange thông qua các đạo cụ như tôi đã có onChange được chỉ định bên trong thành phần được chọn và tôi không muốn ghi đè lên nó.

Ví dụ:

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

Sử dụng <Select onChange={...} /> sẽ không ghi đè lên <select onChange={...} /> bên trong phương pháp Chọn của render. Thành phần <Select/> và thành phần <select/> nó hiển thị có bộ hoàn toàn khác nhau của props.

Cách đơn giản nhất để thực hiện những gì bạn muốn, tôi nghĩ, là có phương thức gọi số handleChange của bạn Chọn this.props.onChange. Bạn chỉ có thể vượt qua đối số e tương tự handleChange nhận được:

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