我有这个函数,当我点击 <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 许可协议
像这样写:
或者创建一个函数,将其用作点击处理程序。在该函数内调用其他两个函数,如下所示:
看到有两种使用箭头函数的方法:
1- 简洁的主体:
() => /*single expression*/
2- 块体:
() => {}
在块体里面
{}
(函数体),我们可以执行任意数量的任务。像这样: