最終更新:2022-12-16 (金) 05:31:56 (496d)
React/イベント処理
https://ja.reactjs.org/tutorial/tutorial.html
https://ja.reactjs.org/docs/handling-events.html
メモ
- React では false を返してもデフォルトの動作を抑止することができません。
- 明示的に preventDefault を呼び出す必要があります
onClick
onClick={() => console.log('click')}- と記載したときに onClick プロパティに渡しているのは関数であることに注意してください。
- React はクリックされるまでこの関数を実行しません。() => を書くのを忘れて onClick={console.log('click')} と書いてしまうのはよくある間違いであり、こうするとコンポーネントが再レンダーされるたびにログが表示されてしまいます。
メモ
- Square を関数コンポーネントに変えた際、onClick={() => this.props.onClick()} をより短い onClick={props.onClick} に書き換えました（両側でカッコが消えています）。
React/クラスコンポーネント
- クラスのメソッドはbindされないので自分でコンストラクタ内でthis.handleClick.bind(this)とする必要がある
- 代替策
- パブリッククラスフィールド構文を使う
- コールバック内でアロー関数を使用する(onClick={()=>this.handleClick()})
