Javascript react.js中的事件组合

我有一个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} />
    }

});

var ParentComponent=React.createClass({
handleChange:函数（事件）{
if（事件上的条件）{
做点什么然后停止处理程序（）；
}否则{
//执行子处理程序
}
},
render:function（）{
...
}
});
var ChildComponent=React.createClass({
handleChange:函数（事件）{
//子处理程序代码
}
},
render:function（）{
...
}
});

---

其思想是父级将根据子级中select的值执行某些操作。但只有一个值，其余值将正常执行子处理程序

在这种情况下，如果我将父处理程序作为道具传递，它将覆盖子处理程序，因此我需要在父处理程序上复制代码

我想到的一个解决方案是，我可以将处理程序作为具有不同名称的道具传递给子处理程序，以便在子处理程序中使用它，但这似乎是一个非常肮脏的解决方案，因为我在单独使用时向子处理程序添加了一个不必要的道具

---

有什么提示吗？

既然父组件似乎已经知道子组件在做什么（即它知道子组件中有一些标准的事件处理逻辑），那么在子组件和父组件之间建立一个更强的契约怎么样

父级可以向更改时调用的子级传递回调。如果该回调返回的不是

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

});

var ParentComponent=React.createClass({
handleChange:函数（事件）{
如果（！事件上的条件）{
返回false；
}
做点什么然后停止处理程序（）；
},
render:function（）{
...
}
});
var ChildComponent=React.createClass({
handleChange:函数（事件）{
if（this.props.onChange&&this.props.onChange（事件）！==false）{
//子处理程序代码
}
},
render:function（）{
...
}
});

对我来说，向孩子传递道具似乎是一个合适的解决方案。不需要给它一个不同的名称。@FelixKling但是，我怎样才能组合这两个处理程序的行为呢？哦，我刚刚注意到，您希望根据事件有条件地执行。嗯。这个想法是父级将根据子级中select的值执行某些操作。但只有一个值，其余的值将正常执行子处理程序。这在我看来是“肮脏”的想法，因为契约在两个方面都得到了加强（不仅父级知道子级，子级也被修改）。因此，如果我找不到更优雅的解决方案，我将实现这个解决方案。谢谢是的，不太理想。但是，您必须以任何一种方式更改孩子，否则应如何通知家长更改事件？好吧，我是reactjs的新手，所以我仍在了解整个过程的工作原理：）