イベント処理：onClickとonChange
onClickとonChangeでユーザー入力を処理し、Reactの合成イベントを理解し、値を安全に読み取ります。
「イベント処理：onClickとonChange」はCoddyKit上の無料React Academyレッスンです。 これはレッスン2/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全3レッスンが含まれています。
Reactのイベント
目標：Reactの合成イベントを使ってクリックやテキストの変更を処理し、ブラウザー間で一貫した動作を実現します。
- onClickでアクションを実行する
- onChangeで入力値を読み取る
- イベントオブジェクトが詳細情報を持つ
onClickの基本
ハンドラーをonClick={handle}として設定します。関数は小さく保ち、setterでstateを更新します（前の値を使う場合は関数形式の更新を優先します）。
onChangeの基本
onChangeはユーザーが入力を編集したときに発生します。event.target.valueからテキストを読み取り、stateを唯一の情報源として保ちます。
デモ：クリックと入力
クリックで値を増やし、onChangeで入力を反映し、event.preventDefault()でフォーム送信時のページ再読み込みを防ぎます。
<div id="root"></div>
合成イベントの実践
合成イベントは、一貫性を保つためにネイティブイベントをラップします。値はハンドラー内で読み取り、ハンドラーは短く目的を絞って保ちます。
- フォームにはevent.preventDefault()を使います
- 入力にはevent.target.valueを使います
ヒントと注意点
ヒント：
- DOMを直接変更せず、stateにUIを制御させます。
- ハンドラー内に重い処理を直接書かず、小さな関数を呼び出します。
- 前のstateを使う場合は、関数形式の更新を使います。
入力値の読み取り
まとめ
まとめ：アクションにはonClick、入力にはonChangeを使います。値はevent.target.valueから読み取り、必要に応じてフォームのデフォルトの再読み込みを防ぎます。
よくある質問
「イベント処理：onClickとonChange」レッスンは無料ですか？
はい。「イベント処理：onClickとonChange」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全3レッスンが含まれています。
「イベント処理：onClickとonChange」で何を学びますか？
onClickとonChangeでユーザー入力を処理し、Reactの合成イベントを理解し、値を安全に読み取ります。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
React Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/3です。
「イベント処理：onClickとonChange」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このReact Academyレッスンでコードを書いて実行できますか？
はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- useStateの基礎と正しい更新
- イベント処理：onClickとonChange
- 制御コンポーネントと非制御入力（入門）