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

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

序章

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

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

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

前提条件

• Node.jsを実行する開発環境が必要になります。 このチュートリアルは、Node.jsバージョン10.20.1およびnpmバージョン6.14.4でテストされました。 これをmacOSまたはUbuntu18.04にインストールするには、Node.jsをインストールしてmacOSにローカル開発環境を作成する方法またはのPPAを使用したインストール]セクションの手順に従います。 Ubuntu18.04にNode.jsをインストールする方法。
• Create React App でセットアップされたReact開発環境で、不要なボイラープレートが削除されています。 これを設定するには、ステップ1 —Reactクラスコンポーネントの状態を管理する方法のチュートリアルの空のプロジェクトを作成します。 このチュートリアルでは、プロジェクト名としてform-tutorialを使用します。
• useStateやuseReducerフックなどのReactイベントとフックを使用します。 イベントについては、 React チュートリアルでDOMおよびウィンドウイベントを処理する方法、およびReactコンポーネントのフックで状態を管理する方法でフックを学ぶことができます。
• また、JavaScriptとHTMLの基本的な知識も必要です。これは、HTMLシリーズでWebサイトを構築する方法およびJavaScriptでコーディングする方法にあります。 CSSの基本的な知識も役立ちます。これは、 Mozilla DeveloperNetworkで見つけることができます。

ステップ1—JSXを使用して基本フォームを作成する

このステップでは、 JSX を使用して、単一の要素と送信ボタンを持つ空のフォームを作成します。 フォーム送信イベントを処理し、データを別のサービスに渡します。 この手順を完了すると、非同期関数にデータを送信する基本的なフォームが作成されます。

まず、App.jsを開きます。

nano src/components/App/App.js

リンゴを購入するためのフォームを作成します。 作成する[[how-to-build-a-website-with-html#how-to-use-a-<div>,-the-html-content-division-element|]]

とともにclassNameの<wrapper> 。 次に、次の強調表示されたコードを追加して、「HowAboutThemApples」というテキストと空のform要素を含む<h1>タグを追加します。

form-tutorial / src / components / App / App.js

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="wrapper">
      <h1>How About Them Apples</h1>
      <form>
      </form>
    </div>
  )
}

export default App;

次に、<form>タグ内に、<label>タグで囲まれた<input>要素を含む<fieldset>要素を追加します。 <input>要素を<label>タグでラップすることにより、ラベルを入力に関連付けることでスクリーンリーダーを支援します。 これにより、アプリケーションのアクセシビリティが向上します。

最後に、フォームの下部に送信<button>を追加します。

form-tutorial / src / components / App / App.js

import React from 'react';
import './App.css';

function App() {
  return(
    <div className="wrapper">
      <h1>How About Them Apples</h1>
      <form>
      <fieldset>
         <label>
           <p>Name</p>
           <input name="name" />
         </label>
       </fieldset>
       <button type="submit">Submit</button>
      </form>
    </div>
  )
}

export default App;

ファイルを保存して閉じます。 次に、App.cssを開いて、スタイルを設定します。

nano src/components/App/App.css

paddingを.wrapperに追加し、marginをfieldsetに追加して、要素間にスペースを与えます。

form-tutorial / src / components / App / App.css

.wrapper {
    padding: 5px 20px;
}

.wrapper fieldset {
    margin: 20px 0;
}

ファイルを保存して閉じます。 これを行うと、ブラウザがリロードされ、基本的なフォームが表示されます。

送信ボタンをクリックすると、ページがリロードされます。 シングルページアプリケーションを構築しているため、type="submit"のボタンに対するこの標準的な動作を防ぐことができます。 代わりに、コンポーネント内でsubmitイベントを処理します。

App.jsを開きます：

nano src/components/App/App.js

イベントを処理するには、<button>ではなく、<form>要素にイベントハンドラーを追加します。 SynthesisEventを引数として取るhandleSubmitという関数を作成します。 SyntheticEventは、標準のEventオブジェクトのラッパーであり、同じインターフェイスが含まれています。 .preventDefaultを呼び出してページがフォームを送信しないようにし、alertをトリガーして、フォームが送信されたことを示します。

form-tutorial / src / components / App / App.js

import React from 'react';
import './App.css';

function App() {
  const handleSubmit = event => {
   event.preventDefault();
   alert('You have submitted the form.')
 }

  return(
    <div className="wrapper">
      <h1>How About Them Apples</h1>
      <form onSubmit={handleSubmit}>
        <fieldset>
          <label>
            <p>Name</p>
            <input name="name" />
          </label>
        </fieldset>
        <button type="submit">Submit</button>
      </form>
    </div>
  )
}

export default App;

ファイルを保存します。 これを行うと、ブラウザがリロードされます。 送信ボタンをクリックすると、アラートがポップアップ表示されますが、ウィンドウはリロードされません。

多くのReactアプリケーションでは、データをWeb APIなどの外部サービスに送信します。 サービスが解決すると、多くの場合、成功メッセージを表示するか、ユーザーをリダイレクトするか、またはその両方を行います。

APIをシミュレートするには、handleSubmit関数にsetTimeout関数を追加します。 これにより、非同期操作が作成され、完了するまでに一定の時間が待機します。これは、外部データの要求と同様に動作します。 次に、useStateフックを使用して、submitting変数とsetSubmitting関数を作成します。 データが送信されたらsetSubmitting(true)を呼び出し、タイムアウトが解決されたらsetSubmitting(false)を呼び出します。

form-tutorial / src / components / App / App.js

import React, { useState } from 'react';
import './App.css';

function App() {
  const [submitting, setSubmitting] = useState(false);
  const handleSubmit = event => {
    event.preventDefault();
   setSubmitting(true);

   setTimeout(() => {
     setSubmitting(false);
   }, 3000)
 }

  return(
    <div className="wrapper">
      <h1>How About Them Apples</h1>
      {submitting &&
       <div>Submtting Form...</div>
     }
      <form onSubmit={handleSubmit}>
        <fieldset>
          <label>
            <p>Name</p>
            <input name="name" />
          </label>
        </fieldset>
        <button type="submit">Submit</button>
      </form>
    </div>
  )
}

export default App;

さらに、submittingがtrueの場合に表示される短いメッセージをHTMLで表示することにより、フォームが送信中であることをユーザーに警告します。

ファイルを保存します。 これを行うと、ブラウザがリロードされ、送信時にメッセージが表示されます。

これで、Reactコンポーネント内で送信イベントを処理する基本的なフォームができました。 onSubmitイベントハンドラーを使用してJSXに接続し、フックを使用してhandleSubmitイベントの実行中に条件付きでアラートを表示しています。

次のステップでは、ユーザー入力を追加し、ユーザーがフォームに入力したときにデータを保存して状態を示します。

ステップ2—制御されていないコンポーネントを使用してフォームデータを収集する

このステップでは、制御されていないコンポーネントを使用してフォームデータを収集します。 制御されていないコンポーネントとは、Reactによってvalueが設定されていないコンポーネントです。 コンポーネントにデータを設定する代わりに、onChangeイベントに接続してユーザー入力を収集します。 コンポーネントを構築するときに、Reactがさまざまな入力タイプを処理する方法と、フォームデータを単一のオブジェクトに収集するための再利用可能な関数を作成する方法を学習します。

この手順を完了すると、ドロップダウンやチェックボックスなど、さまざまなフォーム要素を使用してフォームを作成できるようになります。 また、フォームデータを収集、送信、および表示することもできます。

注：ほとんどの場合、Reactアプリケーションには制御されたコンポーネントを使用します。 ただし、値を誤って設定したときに発生する可能性のある微妙なバグや偶発的なループを回避できるように、制御されていないコンポーネントから始めることをお勧めします。

現在、情報を送信できるフォームがありますが、送信するものはありません。 フォームには単一の<input>要素がありますが、コンポーネントのどこにもデータを収集または保存していません。 ユーザーがフォームを送信したときにデータを保存および処理できるようにするには、状態を管理する方法を作成する必要があります。 次に、イベントハンドラーを使用して各入力に接続する必要があります。

App.js内で、useReducerフックを使用して、formDataオブジェクトとsetFormData関数を作成します。 レデューサー機能は、event.targetオブジェクトからnameとvalueを引き出し、Spreadingでstateを更新します。最後にnameとvalueを追加します。 これにより、現在の状態を保持しながら、変更時に特定の値を上書きする状態オブジェクトが作成されます。

form-tutorial / src / components / App / App.js

import React, { useReducer, useState } from 'react';
import './App.css';

const formReducer = (state, event) => {
 return {
   ...state,
   [event.target.name]: event.target.value
 }
}

function App() {
  const [formData, setFormData] = useReducer(formReducer, {});
  const [submitting, setSubmitting] = useState(false);

  const handleSubmit = event => {
    event.preventDefault();
    setSubmitting(true);

    setTimeout(() => {
      setSubmitting(false);
    }, 3000)
  }

  return(
    <div className="wrapper">
      <h1>How About Them Apples</h1>
      {submitting &&
        <div>Submtting Form...</div>
      }
      <form onSubmit={handleSubmit}>
        <fieldset>
          <label>
            <p>Name</p>
            <input name="name" onChange={setFormData}/>
          </label>
        </fieldset>
        <button type="submit">Submit</button>
      </form>
    </div>
  )
}

export default App;

レデューサーを作成したら、入力のonChangeイベントハンドラーにsetFormDataを追加します。 ファイルを保存します。 これを行うと、ブラウザがリロードされます。 ただし、入力を入力しようとすると、エラーが発生します。

問題は、SyntheticEventが再利用され、非同期関数に渡すことができないことです。 つまり、イベントを直接渡すことはできません。 これを修正するには、レデューサー関数を呼び出す前に、必要なデータを引き出す必要があります。

nameおよびvalueのプロパティを持つオブジェクトを取得するようにreducer関数を更新します。 次に、event.targetからデータをプルし、オブジェクトをsetFormDataに渡すhandleChangeという関数を作成します。 最後に、onChangeイベントハンドラーを更新して、新しい関数を使用します。

form-tutorial / src / components / App / App.js

import React, { useReducer, useState } from 'react';
import './App.css';

const formReducer = (state, event) => {<^>
 return {
   ...state,
   [event.name]: event.value
 }
}

function App() {
  const [formData, setFormData] = useReducer(formReducer, {});
  const [submitting, setSubmitting] = useState(false);

  const handleSubmit = event => {
    event.preventDefault();
    setSubmitting(true);

    setTimeout(() => {
      setSubmitting(false);
    }, 3000);
  }

  const handleChange = event => {
    setFormData({
      name: event.target.name,
      value: event.target.value,
    });
  }

  return(
    <div className="wrapper">
      <h1>How About Them Apples</h1>
      {submitting &&
        <div>Submtting Form...</div>
      }
      <form onSubmit={handleSubmit}>
        <fieldset>
          <label>
            <p>Name</p>
            <input name="name" onChange={handleChange}/>
          </label>
        </fieldset>
        <button type="submit">Submit</button>
      </form>
    </div>
  )
}

export default App;

ファイルを保存します。 これを行うと、ページが更新され、データを入力できるようになります。

フォームの状態を収集しているので、ユーザー表示メッセージを更新して、データを順序付けされていないリスト（<ul>）要素に表示します。

Object.entriesを使用してデータを配列に変換し、次に map を使用して、配列の各メンバーを名前と名前の<li>要素に変換します。値。 要素のkeyプロップとしてnameを使用してください。

form-tutorial / src / components / App / App.js

...
  return(
    <div className="wrapper">
      <h1>How About Them Apples</h1>
      {submitting &&
       <div>
         You are submitting the following:
         <ul>
           {Object.entries(formData).map(([name, value]) => (
             <li key={name}><strong>{name}</strong>:{value.toString()}</li>
           ))}
         </ul>
       </div>
      }
      <form onSubmit={handleSubmit}>
        <fieldset>
          <label>
            <p>Name</p>
            <input name="name" onChange={handleChange}/>
          </label>
        </fieldset>
        <button type="submit">Submit</button>
      </form>
    </div>
  )
}

export default App;

ファイルを保存します。 これを行うと、ページがリロードされ、データを入力および送信できるようになります。

基本的なフォームができたので、さらに要素を追加できます。 別の<fieldset>要素を作成し、<option>ごとに異なるリンゴの品種を持つ<select>要素、type="number"およびstep="1"は1ずつ増加するカウントを取得し、<input>はtype="checkbox"を使用してギフトラッピングオプションを取得します。

要素ごとに、handleChange関数をonChangeイベントハンドラーに追加します。

form-tutorial / src / components / App / App.js

...
  return(
    <div className="wrapper">
      <h1>How About Them Apples</h1>
      {submitting &&
        <div>
          You are submitting the following:
          <ul>
            {Object.entries(formData).map(([name, value]) => (
              <li key={name}><strong>{name}</strong>: {value.toString()}</li>
            ))}
          </ul>
        </div>
      }
      <form onSubmit={handleSubmit}>
        <fieldset>
          <label>
            <p>Name</p>
            <input name="name" onChange={handleChange}/>
          </label>
        </fieldset>
        <fieldset>
         <label>
           <p>Apples</p>
           <select name="apple" onChange={handleChange}>
               <option value="">--Please choose an option--</option>
               <option value="fuji">Fuji</option>
               <option value="jonathan">Jonathan</option>
               <option value="honey-crisp">Honey Crisp</option>
           </select>
         </label>
         <label>
           <p>Count</p>
           <input type="number" name="count" onChange={handleChange} step="1"/>
         </label>
         <label>
           <p>Gift Wrap</p>
           <input type="checkbox" name="gift-wrap" onChange={handleChange} />
         </label>
       </fieldset>
        <button type="submit">Submit</button>
      </form>
    </div>
  )
}

export default App;

ファイルを保存します。 これを行うと、ページが再読み込みされ、フォームにさまざまな入力タイプが表示されます。

ここで考慮すべき特別なケースが1つあります。 ギフトラッピングチェックボックスのvalueは、アイテムがチェックされているかどうかに関係なく、常に"on"になります。 イベントのvalue を使用する代わりに、checkedプロパティを使用する必要があります。

handleChange関数を更新して、event.target.typeがcheckboxであるかどうかを確認します。 そうである場合は、event.target.valueではなくvalueとしてevent.target.checkedプロパティを渡します。

form-tutorial / src / components / App / App.js

import React, { useReducer, useState } from 'react';
import './App.css';

...

function App() {
  const [formData, setFormData] = useReducer(formReducer, {});
  const [submitting, setSubmitting] = useState(false);

  const handleSubmit = event => {
    event.preventDefault();
    setSubmitting(true);

    setTimeout(() => {
      setSubmitting(false);
    }, 3000);
  }

  const handleChange = event => {
   const isCheckbox = event.target.type === 'checkbox';
   setFormData({
     name: event.target.name,
     value: isCheckbox ? event.target.checked : event.target.value,
   })
 }
...

このコードでは、 ？ 三項演算子条件文を作成します。

ファイルを保存します。 ブラウザが更新されたら、フォームに入力して[送信]をクリックします。 アラートが次の形式のデータと一致していることがわかります。

このステップでは、制御されていないフォームコンポーネントを作成する方法を学びました。 useReducerフックを使用してフォームデータを状態に保存し、そのデータをさまざまなコンポーネントで再利用しました。 また、さまざまなタイプのフォームコンポーネントを追加し、要素タイプに応じて正しいデータを保存するように関数を調整しました。

次のステップでは、コンポーネント値を動的に設定することにより、コンポーネントを制御されたコンポーネントに変換します。

ステップ3—制御されたコンポーネントを使用してフォームデータを更新する

このステップでは、制御されたコンポーネントを使用してデータを動的に設定および更新します。 各コンポーネントにvalue prop を追加して、フォームデータを設定または更新します。 また、送信時にフォームデータをリセットします。

このステップを終えると、Reactの状態と小道具を使用してフォームデータを動的に制御できるようになります。

制御されていないコンポーネントを使用すると、データの同期について心配する必要はありません。 アプリケーションは常に最新の変更を保持します。 ただし、入力コンポーネントからの読み取りと入力コンポーネントへの書き込みの両方が必要になる状況は数多くあります。 これを行うには、コンポーネントの値が動的である必要があります。

前の手順で、フォームを送信しました。 ただし、フォームの送信が成功した後も、フォームには古い古いデータが含まれていました。 各入力からデータを消去するには、コンポーネントを非制御コンポーネントから制御コンポーネントに変更する必要があります。

制御されたコンポーネントは制御されていないコンポーネントに似ていますが、Reactはvalueプロップを更新します。 欠点は、注意せずにvalue支柱を適切に更新しないと、コンポーネントが壊れているように見え、更新されていないように見えることです。

このフォームでは、すでにデータが保存されているため、コンポーネントを変換するには、valueプロップをformData状態のデータで更新します。 ただし、問題が1つあります。valueをundefinedにすることはできません。 値がundefinedの場合、コンソールでエラーが発生します。

初期状態は空のオブジェクトであるため、値をformDataの値または空の文字列などのデフォルト値のいずれかに設定する必要があります。 たとえば、名前の値はformData.name || になります。

form-tutorial / src / components / App / App.js

...
  return(
    <div className="wrapper">
      <h1>How About Them Apples</h1>
      {submitting &&
        <div>
          You are submitting the following:
          <ul>
            {Object.entries(formData).map(([name, value]) => (
              <li key={name}><strong>{name}</strong>: {value.toString()}</li>
            ))}
          </ul>
        </div>
      }
      <form onSubmit={handleSubmit}>
        <fieldset>
          <label>
            <p>Name</p>
            <input name="name" onChange={handleChange} value={formData.name || ''}/>
          </label>
        </fieldset>
        <fieldset>
          <label>
            <p>Apples</p>
            <select name="apple" onChange={handleChange} value={formData.apple || ''}>
                <option value="">--Please choose an option--</option>
                <option value="fuji">Fuji</option>
                <option value="jonathan">Jonathan</option>
                <option value="honey-crisp">Honey Crisp</option>
            </select>
          </label>
          <label>
            <p>Count</p>
            <input type="number" name="count" onChange={handleChange} step="1" value={formData.count || ''}/>
          </label>
          <label>
            <p>Gift Wrap</p>
            <input type="checkbox" name="gift-wrap" onChange={handleChange} checked={formData['gift-wrap'] || false}/>
          </label>
        </fieldset>
        <button type="submit">Submit</button>
      </form>
    </div>
  )
}

export default App;

以前と同様に、チェックボックスは少し異なります。 値を設定する代わりに、checked属性を設定する必要があります。 属性がtrueの場合、ブラウザはチェックボックスをオンにしたものとして表示します。 formData['gift-wrap'] || falseを使用して、最初のchecked属性をfalseに設定します。

フォームに事前に入力する場合は、デフォルトのデータをformData状態に追加します。 formStateに{ count: 100 }のデフォルト値を指定して、countのデフォルト値を設定します。 初期オブジェクトにデフォルト値を設定することもできますが、フォーム情報を表示する前に、偽の値を除外する必要があります。

form-tutorial / src / components / App / App.js

...

function App() {
  const [formData, setFormData] = useReducer(formReducer, {
   count: 100,
 });
  const [submitting, setSubmitting] = useState(false);
...

ファイルを保存します。 これを行うと、ブラウザがリロードされ、デフォルトのデータで入力が表示されます。

注： value属性は、ブラウザーでネイティブであるplaceholder属性とは異なります。 placeholder属性は情報を表示しますが、ユーザーが変更を加えるとすぐに消えます。 コンポーネントには保存されません。 valueは積極的に編集できますが、placeholderはユーザー向けのガイドにすぎません。

アクティブなコンポーネントができたので、送信時にデータをクリアできます。 これを行うには、formReducerに新しい条件を追加します。 event.resetが正しければ、フォーム要素ごとに値が空のオブジェクトを返します。 入力ごとに必ず値を追加してください。 空のオブジェクトまたは不完全なオブジェクトを返すと、値がundefinedであるため、コンポーネントは更新されません。

formReducerに新しいイベント条件を追加した後、送信関数を更新して、関数が解決したときに状態をリセットします。

form-tutorial / src / components / App / App.js

import React, { useReducer, useState } from 'react';
import './App.css';

const formReducer = (state, event) => {
  if(event.reset) {
   return {
     apple: '',
     count: 0,
     name: '',
     'gift-wrap': false,
   }
 }
  return {
    ...state,
    [event.name]: event.value
  }
}

function App() {
  const [formData, setFormData] = useReducer(formReducer, {
    count: 100
  });
  const [submitting, setSubmitting] = useState(false);

  const handleSubmit = event => {
    event.preventDefault();
    setSubmitting(true);

    setTimeout(() => {
      setSubmitting(false);
      setFormData({
       reset: true
     })
    }, 3000);
  }

...

ファイルを保存します。 これを行うと、ブラウザがリロードされ、送信時にフォームがクリアされます。

このステップでは、valueまたはchecked属性を動的に設定することにより、制御されていないコンポーネントを制御されたコンポーネントに変換しました。 また、デフォルトの状態を設定してデータを再入力する方法と、フォームレデューサーを更新してデフォルト値を返すことでデータをクリアする方法も学習しました。

この次のステップでは、フォームコンポーネントのプロパティを動的に設定し、送信中にフォームを無効にします。

ステップ4—フォームのプロパティを動的に更新する

このステップでは、フォーム要素のプロパティを動的に更新します。 以前の選択に基づいてプロパティを設定し、送信中にフォームを無効にして、誤って複数回送信するのを防ぎます。

現在、各コンポーネントは静的です。 フォームが変更されても変更されません。 ほとんどのアプリケーションでは、フォームは動的です。 フィールドは以前のデータに基づいて変更されます。 検証してエラーを表示します。 他のコンポーネントを入力すると、それらが消えたり拡大したりする場合があります。

ほとんどのReactコンポーネントと同様に、コンポーネントにプロパティと属性を動的に設定でき、データの変更に応じて再レンダリングされます。

別の入力で条件が満たされるまで、入力をdisabledに設定してみてください。 ユーザーがfujiオプションを選択しない限り、ギフト包装チェックボックスを無効に更新します。

App.js内で、disabled属性をチェックボックスに追加します。 formData.appleがfujiの場合、プロパティを真にします。

form-tutorial / src / components / App / App.js

...
        <fieldset>
          <label>
            <p>Apples</p>
            <select name="apple" onChange={handleChange} value={formData.apple || ''}>
                <option value="">--Please choose an option--</option>
                <option value="fuji">Fuji</option>
                <option value="jonathan">Jonathan</option>
                <option value="honey-crisp">Honey Crisp</option>
            </select>
          </label>
          <label>
            <p>Count</p>
            <input type="number" name="count" onChange={handleChange} step="1" value={formData.count || ''}/>
          </label>
          <label>
            <p>Gift Wrap</p>
            <input
             checked={formData['gift-wrap'] || false}
             disabled={formData.apple !== 'fuji'}
             name="gift-wrap"
             onChange={handleChange}
             type="checkbox"
            />
          </label>
        </fieldset>
        <button type="submit">Submit</button>
      </form>
    </div>
  )
}

export default App;

ファイルを保存します。 これを行うと、ブラウザがリロードされ、チェックボックスがデフォルトで無効になります。

Fuji のアップルタイプを選択すると、要素が有効になります。

個々のコンポーネントのプロパティを変更することに加えて、fieldsetコンポーネントを更新することにより、コンポーネントのグループ全体を変更できます。

たとえば、フォームがアクティブに送信されている間は、フォームを無効にすることができます。 これにより、二重送信が防止され、handleSubmit関数が完全に解決される前にユーザーがフィールドを変更できなくなります。

各<fieldset>要素と<button>要素にdisabled={submitting}を追加します。

form-tutorial / src / components / App / App.js

...
      <form onSubmit={handleSubmit}>
        <fieldset disabled={submitting}>
          <label>
            <p>Name</p>
            <input name="name" onChange={handleChange} value={formData.name || ''}/>
          </label>
        </fieldset>
        <fieldset disabled={submitting}>
          <label>
            <p>Apples</p>
            <select name="apple" onChange={handleChange} value={formData.apple || ''}>
                <option value="">--Please choose an option--</option>
                <option value="fuji">Fuji</option>
                <option value="jonathan">Jonathan</option>
                <option value="honey-crisp">Honey Crisp</option>
            </select>
          </label>
          <label>
            <p>Count</p>
            <input type="number" name="count" onChange={handleChange} step="1" value={formData.count || ''}/>
          </label>
          <label>
            <p>Gift Wrap</p>
            <input
              checked={formData['gift-wrap'] || false}
              disabled={formData.apple !== 'fuji'}
              name="gift-wrap"
              onChange={handleChange}
              type="checkbox"
            />
          </label>
        </fieldset>
        <button type="submit" disabled={submitting}>Submit</button>
      </form>
    </div>
  )
}

export default App;

ファイルを保存すると、ブラウザが更新されます。 フォームを送信すると、送信機能が解決するまでフィールドは無効になります。

入力コンポーネントの任意の属性を更新できます。 これは、数値入力のmaxvalueを変更する必要がある場合、または検証のために動的なpattern属性を追加する必要がある場合に役立ちます。

このステップでは、フォームコンポーネントに属性を動的に設定します。 別のコンポーネントからの入力に基づいてコンポーネントを動的に有効または無効にするプロパティを追加し、<fieldset>コンポーネントを使用してセクション全体を無効にしました。

結論

フォームはリッチWebアプリケーションの鍵です。 Reactでは、フォームと要素を接続および制御するためのさまざまなオプションがあります。 他のコンポーネントと同様に、value入力要素を含むプロパティを動的に更新できます。 制御されていないコンポーネントは単純化するのに最適ですが、コンポーネントをクリアしたり、データを事前に入力したりする必要がある状況には適合しない場合があります。 制御されたコンポーネントは、データを更新する機会を増やしますが、意図しないバグや再レンダリングを引き起こす可能性のある別のレベルの抽象化を追加する可能性があります。

アプローチに関係なく、Reactを使用すると、フォームを動的に更新して、アプリケーションとユーザーのニーズに適合させることができます。

Reactチュートリアルをもっと読みたい場合は、 Reactトピックページを確認するか、React.jsシリーズのコーディング方法ページに戻ってください。