react.js 中的事件组合

Question

我有一个 react.js 组件，它有一个带有 onChange 事件处理程序的 select。我在需要向 onChange 添加特定行为的 parent 组件中重用该组件，但前提是满足特定条件；如果不是，则应应用 child 组件的行为。情况伪代码是这样的：

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

});

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

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

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

有什么建议吗？

Answer 1

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

父项可以将回调传递给在更改时调用的子项。如果该回调 returns 除了 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} />
    }

});

react.js 中的事件组合

Event composition in react.js

javascript

event-handling

reactjs