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

发布时间：2020-12-15 20:47:36 所属栏目：百科来源：网络整理

导读：所有：我想知道是否有可能将多个事件处理程序绑定到同一事件？例如： var LikeToggleButton = React.createClass({ render: function(){ (function toggle(){ this.setState({liked:!like}); }).bind(this); return ( div onClick={toggle}TOGGLE LIKE/div

所有：

我想知道是否有可能将多个事件处理程序绑定到同一事件？

例如：

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

在此之前,一切看起来都很正常,但我想为该按钮添加另一个功能,由其他选项决定：

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

谢谢

如果你想在触发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.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!