web-dev-qa-db-ja.com

同じonClickイベントReactJSで複数の関数を呼び出す方法

この関数があり、<li>タグをクリックすると、2つの関数、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>
      ))

この2つの関数を呼び出すにはどうすればよいですか？これは、親コンポーネントのハンドラー関数です

  handleProjectSelection = (project) => () => {
    this.setState({
      projectToAdd: project.get('id'),
      projectToAddColor: project.get('color'),
      projectToAddName: project.get('name') === 'default' ? 'No' : project.get('name').substring(0, 2)
    })
  }
javascriptreactjsfunction
7
Liz Parody

次のように書きます：

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

または、単一の関数を作成し、それをクリックハンドラーとして使用します。この関数内で、次のように他の2つの関数を呼び出します。

onClick={this.handleClick}

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

矢印関数を使用する方法は2つあります。

1-簡潔なボディ：() => /*single expression*/

2-ブロック本体：() => {}

{}（関数の本体）内のブロック本体では、任意の数のタスクを実行できます。

このような：

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

2つ以上の関数呼び出しを別の関数/メソッドでラップできます。例えば

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

次の2つの方法で実行できます。
1。

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

2。

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

onClick={this.callTwoFunctions}
1
Amanshu Kataria