最終更新:2022-07-07 (木) 12:49:49 (39d)
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} に書き換えました(両側でカッコが消えています)。