1. ホーム
  2. javascript

[解決済み] ReactJSのonClickで複数の関数を呼び出す

2022-04-22 08:37:31

質問

バニラJavaScriptで、できることは知っています。

onclick="f1();f2()"

2つの関数呼び出しを行う場合はどうなりますか? onClick ReactJSでは?

1つの関数を呼び出すと、こんな感じですよね。

onClick={f1}

解決方法は?

2つ以上の関数呼び出しを別の関数/メソッドでラップする。このアイデアのいくつかのバリエーションを紹介します。

1) メソッドを分離する

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

またはES6クラスで。

class Test extends React.Component {
   onClick(event) {
      func1();
      func2();
   }
   render() {
      return (
         <a href="#" onClick={this.onClick}>Test Link</a>
      );
   }
}

2) インライン

<a href="#" onClick={function(event){ func1(); func2()}}>Test Link</a>

またはES6と同等です。

<a href="#" onClick={() => { func1(); func2();}}>Test Link</a>