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

  • Z时代
  • 2024-01-10
  • 分类：问答

我有这个功能，当我点击<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)
    })
  }

回答：

这样写：

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

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

onClick={this.handleClick}
handleClick(){
   function1();
   function2();
}

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

1-简洁的机身： () => /*single expression*/

2块体 () => {}

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

像这样：

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

以上是 如何在同一onClick事件ReactJS上调用多个函数 的全部内容， 来源链接： utcz.com/qa/428793.html

回到顶部