最終更新:2022-07-07 (木) 12:49:49 (39d)  

React/イベント処理
Top / React / イベント処理

https://ja.reactjs.org/tutorial/tutorial.html

onClick

  • onClick={() => console.log('click')}
  • と記載したときに onClick プロパティに渡しているのは関数であることに注意してください。
  • React はクリックされるまでこの関数を実行しません。() => を書くのを忘れて onClick={console.log('click')} と書いてしまうのはよくある間違いであり、こうするとコンポーネントが再レンダーされるたびにログが表示されてしまいます。

メモ

  • Square を関数コンポーネントに変えた際、onClick={() => this.props.onClick()} をより短い onClick={props.onClick} に書き換えました(両側でカッコが消えています)。