event-handling - 如何在 React.js 中向同一事件添加多个事件处理程序

Question

全部:

我想知道是否可以将多个事件处理程序绑定(bind)到同一个事件？

例如:

var LikeToggleButton = React.createClass({
    render: function(){
        (function toggle(){
            this.setState({liked:!like});
        }).bind(this);
        return (
            <div onClick={toggle}>TOGGLE LIKE</div>  
        );
    }
});

到目前为止，一切看起来都很正常，但我想向该按钮添加另一个功能，这由其他选项决定:

例如，我有另一个称为“计数切换”的开关组件(可以是复选框或单选按钮等)，启用该组件后，LikeToggleButton 的按钮将添加另一个 onClick 处理程序，该处理程序开始计算单击按钮的次数，我知道它可以预先设计到切换功能中，但我只是想知道是否有办法将这部分附加到 onClick 处理程序？

谢谢

Answer 1

如果您希望在触发 onClick 时执行多个回调，您可以从外部传递它们，这样您就可以在 props 对象中访问它们。然后全部执行(注意:代码未经测试):

var LikeToggleButton = React.createClass({

    toggle: function() {
        this.setState({liked:!like});
    },

    handleClick: function(e) {
        e.preventDefault();
        this.toggle();
        for (var i=0, l<this.props.callbacks.length; i<l; i++) {
           this.props.callbacks[i].call();
        }
    },

    render: function() {            
        return (
            <div onClick={this.handleClick}>TOGGLE LIKE</div>  
        );
    }
});

但是，如果您想要在组件之间连接组件，则不应通过调用处理程序内的方法来实现。相反，您应该使用架构模式，其中 Flux 是显而易见的选择(但还有更多)。

查看 Flux ，这里有more choices .