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

新手上路,请多包涵

我有这个函数,当我点击 <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)
    })
  }

原文由 Liz Parody 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 848
2 个回答

像这样写:

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

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

 onClick={this.handleClick}

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


看到有两种使用箭头函数的方法:

1- 简洁的主体: () => /*single expression*/

2- 块体: () => {}

在块体里面 {} (函数体),我们可以执行任意数量的任务。

像这样:

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

原文由 Mayank Shukla 发布,翻译遵循 CC BY-SA 3.0 许可协议

您可以通过两种方式做到这一点:

1.

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

2.

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

onClick={this.callTwoFunctions}

原文由 Amanshu Kataria 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题