Javascript 如何在同一onClick事件上调用多个函数

我有这个函数，当我点击

标记时，我想调用两个函数，

onClick={handleProjectSelection（project）}

一个来自父组件的props的处理函数，还有这个函数

onClick={（）=>this.setState（{showingProjectSelector:false}）

这样写：

onClick={() => {
   handleProjectSelection(project);
   anotherfunctionCall();
}}

或者创建一个函数，将其用作单击处理程序。在该函数中调用其他两个函数，如下所示：

onClick={this.handleClick}

handleClick(){
   function1();
   function2();
}

onClick={() => {
   fun1();
   fun2();
   fun3();
   fun4();
   ....
   funN();
}}

---

请参见有两种使用箭头功能的方法：

1-简明正文：

（）=>/*单个表达式*/

2-块体：

（）=>{}

在

{}

内的块体（函数体）中，我们可以执行任意数量的任务

像这样：

onClick={this.handleClick}

handleClick(){
   function1();
   function2();
}

onClick={() => {
   fun1();
   fun2();
   fun3();
   fun4();
   ....
   funN();
}}

---

您可以将两个以上的函数调用包装到另一个函数/方法中。比如说

var Test = React.createClass({
   onClick: function(event){
      func1();
      func2();
   },
   render: function(){
      return (
         <a href="#" onClick={this.onClick}>Test Link</a>
      );
   }
});

var Test=React.createClass({
onClick：函数（事件）{
func1（）；
func2（）；
},
render:function（）{
返回(
);
}
});

您可以通过两种方式来完成：
1.

二,

---

我按照你在第一个例子中所说的做了，它成功了！onClick={（）=>{handleProjectSelection（project）；this.setState（{showingProjectSelector:！this.state.showingProjectSelector}}}}}但是我试图用一个不同的函数来实现它：handleClick（project）{const{handleProjectSelection}=this.props handleProjectSelection（project）this.setState（{showingProjectSelector:！this.state.showingProjectSelector}）但它不起作用。你知道为什么吗？因为你忘了绑定

handleClick

方法，所以把这一行放在构造函数中：

this.handleClick=this.handleClick.bind（this）

，否则，

此

关键字将不会指向类实例：）假设此onClick位于子组件中，我可以将道具作为这五个函数之一传递吗？没有正确获取，你能解释更多或者展示你的代码吗？如果第一个是异步的呢..我希望第二个只有在第一个成功完成后才能执行..如果第一个是异步的..我希望第二个只有在第一个成功完成后才能执行..你可以使用async Wait

onClick={()=>{
    callFunctionOne();
    callFunctionTwo();
}}

callTwoFunctions(){
    callFunctionOne();
    callFunctionTwo();
}

onClick={this.callTwoFunctions}