react.js中的事件組合

Question

我有一個react.js組件，它具有帶onChange事件處理程序的select。我在需要向onChange添加特定行爲的父組件中重用該組件，但只有在滿足某些條件時才使用該組件。如果不是，則應適用子組件的行爲。這種情況僞會是這樣的：

var ParentComponent = React.createClass({ 
    handleChange: function(event) { 
     if (condition_on_event) { 
      do_something_and_stop_the_handler(); 
     } else { 
      //execute_child_handler 
     } 
    }, 
    render: function() { 
     ... 
     <ChildComponent /> 
    } 

}); 

var ChildComponent = React.createClass({ 
    handleChange: function(event) { 
      //child handler code 
     } 
    }, 
    render: function() { 
     ... 
     <select onChange={this.handleChange} /> 
    } 

}); 

的想法是，母公司將根據選擇的子對象中的值執行的東西。但是隻有一個值，其餘的值通常會執行子處理程序。

在這種情況下，如果我將父處理程序作爲道具傳遞，它會覆蓋子處理程序，所以我需要在父項上覆制代碼。

想到的一個解決方案是，我可以將處理程序作爲具有不同名稱的通道傳遞，以便在子處理程序中使用它，但它看起來像一個非常骯髒的解決方案，因爲我添加了不必要的道具在孤立地使用時給孩子。

任何提示？

Answer 1

由於父組件似乎已經有種知道孩子在做什麼（即它知道有一些標準的事件處理邏輯的孩子），如何建立孩子和家長之間更強的合同嗎？

父母可以將回調傳遞給更改時調用的孩子。如果該回調返回除false之外的任何內容，則該孩子將繼續其通常的事件處理，否則將停止。

例子：

var ParentComponent = React.createClass({ 
    handleChange: function(event) { 
     if (!condition_on_event) { 
      return false; 
     } 
     do_something_and_stop_the_handler(); 
    }, 
    render: function() { 
     ... 
     <ChildComponent onChange={this.handleChange}/> 
    } 

}); 

var ChildComponent = React.createClass({ 
    handleChange: function(event) { 
     if (this.props.onChange && this.props.onChange(event) !== false) { 
     //child handler code 
     } 
    }, 
    render: function() { 
     ... 
     <select onChange={this.handleChange} /> 
    } 

});