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

时间:2018-02-19 16:36:28

标签: javascript reactjs function

我有这个功能,当我点击<li>标签时,我想调用两个函数,onClick={handleProjectSelection(project)}一个来自父组件的props的处理函数,以及这个函数{{ 1}}

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>
      ))

3 个答案:

答案 0 :(得分:6)

像这样写:

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

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

onClick={this.handleClick}

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

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

1-简明身体:() => /*single expression*/

2- Block Body:() => {}

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

像这样:

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

答案 1 :(得分:1)

您可以用另一个函数/方法包装两个+函数调用。例如

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

答案 2 :(得分:1)

你可以用两种方式做到:
1.

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

2

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

onClick={this.callTwoFunctions}