如何在同一个onClick事件ReactJS上调用多个函数答案

【问题标题】：How to call multiple functions on the same onClick event ReactJS如何在同一个onClick事件ReactJS上调用多个函数
【发布时间】：2018-07-29 22:33:11
【问题描述】：

我有这个函数，当我点击<li>标签时，我想调用两个函数，onClick={handleProjectSelection(project)}一个来自父组件props的处理函数，还有这个函数onClick={() => this.setState({ showingProjectSelector: false })}

  renderDropdown () {
    const { displayDropdown, projects, handleProjectSelection } = this.props
    if (this.state.showingProjectSelector && displayDropdown) {
      const projectsList = projects.map((project) => (
        <li className='u-cursor--pointer u-font-size--12px'
          key={project.get('id')}
          onClick={handleProjectSelection(project)} >
          <i className='fa fa-square u-font-size--10px' style={{color: project.get('color')}}></i>
          {project.get('name')}
        </li>
      ))

如何调用这两个函数？这是父组件的处理函数

  handleProjectSelection = (project) => () => {
    this.setState({
      projectToAdd: project.get('id'),
      projectToAddColor: project.get('color'),
      projectToAddName: project.get('name') === 'default' ? 'No' : project.get('name').substring(0, 2)
    })
  }

【问题讨论】：

标签： javascript reactjs function

【解决方案1】：

这样写：

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

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

onClick={this.handleClick}

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

看看箭头函数有两种使用方式：

1- 简洁正文：() => /*single expression*/

2- 块体：() => {}

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

像这样：

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

【讨论】：

我按照您在第一个示例中所说的做了，并且成功了！ 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)，否则this关键字不会指向类实例:)
假设这个 onClick 在子组件中，我可以将 prop 作为这五个函数之一传递吗？
没有正确理解你，你能解释更多或显示你的代码吗？
如果第一个是异步的..我希望第二个只有在第一个成功完成后才能执行

【解决方案2】：

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

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

【讨论】：

如果第一个是异步的..我希望第二个只有在第一个成功完成后才能执行
你可以使用异步等待

【解决方案3】：

您可以通过两种方式做到这一点：
1.

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

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

onClick={this.callTwoFunctions}

【讨论】：