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} /> 
    } 

});