react.js中的事件构成

时间:2015-11-23 14:28:01

标签: javascript event-handling reactjs

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

});

这个想法是父母将根据孩子中的选择值执行某些操作。但只有一个值,其余值将正常执行子处理程序。

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

我想到的一个解决方案是,我可以将处理程序作为具有不同名称的prop传递,以在子处理程序中使用它,但它似乎是一个非常脏的解决方案,因为我添加了一个不必要的在隔离使用时支撑孩子。

任何提示?

0 个答案:

没有答案