Question

如何在ReactJS中实现以下方案？

function foo1(){
    console.log('foo1')
}

function foo2(){
    console.log('foo2')
}
$('#button').click(foo1);
$('#button').click(foo2);

我希望在单击按钮

时调用这两个函数

考虑以下jsx代码

 Var Component = React.createClass({
    foo1: function(){
        console.log('foo1');
    },
    foo2: function(){
        console.log('foo2');
    },
    render: function(){
        return (
           <button onClick={this.foo}> click me </button>
        );
    }

});

Answer 1

也许你可以编写第三个函数来顺序调用前两个函数：

var Component = React.createClass({
    foo1: function(){
        console.log('foo1');
    },
    foo2: function(){
        console.log('foo2');
    },
    foo: function(){
        foo1();
        foo2();
    },
    render: function(){
        return (
           <button onClick={this.foo}> click me </button>
        );
    }

});

或将其内联：

<button onClick={function(){ this.foo1(); this.foo2(); }.bind(this)}> click me </button>

Answer 2

您可以创建一个函数数组，并迭代它。

Var Component = React.createClass({
foo1: function(){
    console.log('foo1');
},
foo2: function(){
    console.log('foo2');
},
render: function(){
    return (
       <button onClick={(e)=> [foo1, foo2].forEach(x=> x.call(null,e))}> click me </button>
    );
}

}）;

如何在reactjs中为按钮单击绑定两个函数

2 个答案: