我有这个功能,当我点击<li>标签时,我想调用两个功能,onClick={handleProjectSelection(project)}一个来自父组件的props的处理程序功能,还有这个功能onClick={() => this.setState({ showingProjectSelector: false })}
<li>
onClick={handleProjectSelection(project)}
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*/
() => /*single expression*/
2块体 () => {}
() => {}
在内部的程序块主体{}(函数的主体)中,我们可以执行任意数量的任务。
{}
像这样:
onClick={() => { fun1(); fun2(); fun3(); fun4(); .... funN(); }}