開発者ドキュメント

Reactでフォームを作成する方法

著者は、 Creative Commons を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。

序章

フォームは、 ReactWebアプリケーションの重要なコンポーネントです。 ユーザーは、ログイン画面からチェックアウトページまでのコンポーネントにデータを直接入力して送信できます。 ほとんどのReactアプリケーションはシングルページアプリケーション(SPA)、または新しいデータが動的に表示される単一ページをロードするWebアプリケーションであるため、フォームからサーバーに直接情報を送信することはありません。 代わりに、クライアント側でフォーム情報をキャプチャし、追加のJavaScriptコードを使用して送信または表示します。

ブラウザがほとんどのフォーム要素を処理し、 React変更イベントを介してデータを収集できるようにするか、Reactを使用して入力を設定および更新することで要素を完全に制御できるため、Reactフォームには固有の課題があります。直接値。 最初のアプローチは、Reactが値を設定していないため、非制御コンポーネントと呼ばれます。 2番目のアプローチは、Reactが入力をアクティブに更新しているため、制御コンポーネントと呼ばれます。

このチュートリアルでは、Reactを使用してフォームを作成し、リンゴの購入リクエストを送信するサンプルアプリを使用してフォームの送信を処理します。 また、制御されたコンポーネントと制御されていないコンポーネントの長所と短所についても学びます。 最後に、フォームの状態に応じてフィールドを有効または無効にするようにフォームのプロパティを動的に設定します。 このチュートリアルを終了すると、テキスト入力、チェックボックス、選択リストなどを使用してさまざまなフォームを作成できるようになります。

前提条件

モバイルバージョンを終了