Reactの処理を形成するための完全なガイド

制御されたコンポーネントを使用して、入力値を結合してOnchangeで状態を反応させて、予測可能な状態管理を確認します。 2。単一の状態オブジェクトを使用して、名前属性を介して動的に更新することにより、複数の入力を効率的に処理します。 3.ページのリロードを避け、送信またはリアルタイムで検証を実装するために、PreventDefaultを使用してOnSubmitを使用してフォームを送信します。 4.エラーを状態に保存し、入力を検証し、ユーザーフィードバックを条件付きで表示して、エラーを管理します。 5。提出後にフォームをリセットするか、小道具から状態を初期化して既存のデータを使用してリセットします。 6.再レンダーを削減し、フォームロジックを簡素化する、パフォーマンス、ネストされたフィールド、または組み込みの検証を含む複雑なユースケースのReactフックフォームなどのライブラリを採用します。常に検証し、明確なフィードバックを提供し、必要に応じてアプローチを拡大してください。

Reactのフォームの処理は最初は簡単に思えるかもしれませんが、アプリが成長するにつれて、状態、検証、ユーザーのフィードバックの管理が重要になります。従来のHTMLフォームとは異なり、Reactはより制御された予測可能なアプローチを促進します。以下は、基本からベストプラクティスまで、Reactのフォーム処理をマスターするための実用的なガイドです。

1。制御されたコンポーネント：反応方法

Reactでは、制御されたコンポーネントがフォーム入力を処理する標準です。これは、フォームデータがDOMではなくReact状態によって処理されることを意味します。

入力に独自の値を管理させる代わりに、 value Propをコンポーネント状態に結び付け、 onChangeで更新します。

 function nameform（）{
  const [name、setname] = uesestate（ ''）;

  戻る （
    <form>
      <label>
        名前：
        <入力
          type = "text"
          value = {name}
          onchange = {（e）=> setName（e.target.value）}
        />
      </label>
      <p>こんにちは、{name}！</p>
    </form>
  ）;
}

なぜこれが重要なのか：

• 現在の入力値に常にアクセスできます。
• リアルタイムの検証またはフォーマットを簡単に実行できます。
• 動的な動作を有効にします（たとえば、入力に基づいてボタンを無効にします）。

ヒント：常にonChangeを使用して状態を更新します - 管理を開始しても、 valueのないものを制御されないままにしないでください。

2。複数の入力の処理

フォームが成長すると、複数のフィールドがあります。それぞれのセッターを書く代わりに、単一の状態オブジェクトを使用して動的に更新します。

 function userform（）{
  const [formdata、setformdata] = uesestate（{
    名前： ''、
    メール： ''、
    年： ''、
  }）;

  const handlechange =（e）=> {
    const {name、value} = e.target;
    setformdata（（prev）=>（{
      ...前、
      [名前]：値、
    }））;
  };

  戻る （
    <form>
      <入力名= "name" value = {formdata.name} onchange = {handlechange} placeholder = "name" />
      <入力名= "email" value = {formdata.email} onchange = {handlechange} placeholder = "email" />
      <入力名= "age" value = {formdata.age} onchange = {handlechange} placeholder = "age" />
    </form>
  ）;
}

キーポイント：

• name属性を使用して、どのフィールドが変更されたかを識別します。
• 他のフィールドを保存するために前の状態を広げます。
• テキスト、電子メール、番号、さらにはマイナーな調整を受けたチェックボックスに最適です。

チェックボックスの場合：

 <入力
  type = "チェックボックス"
  name = "subscribe"
  checked = {formdata.subscribe}
  onChange = {（e）=> setFormData（prev =>（{... prev、subscribe：e.target.checked}）}
/>

3。フォームの提出と検証

onSubmitハンドラーを使用して、フォームデータを処理します。 Prevent Default PageがpreventDefault()を使用してリロードします。

 const handleSubmit =（e）=> {
  E.PreventDefault（）;

  //基本的な検証
  if（！formdata.name ||！formdata.email）{
    アラート（「すべてのフィールドに記入してください」）;
    戻る;
  }

  console.log（ 'form submitted：'、formdata）;
  // API、リセットフォームなどに送信します。
};

フォームに追加します：

 <form onsubmit = {handlesubmit}>
  {/ *入力 */}
  <button type = "submit">送信</button>
</form>

一般的な検証戦略：

• インラインチェック：送信時に検証（シンプル、スターターに適しています）。
• リアルタイム検証：ユーザーのタイプとしてエラーを表示します。
• カスタムフック：再利用性のためにuseFormようなロジックを抽出します。

4.エラーとフィードバックの管理

何がうまくいかなかったかをユーザーに示します。エラーを状態に保存し、条件付きで表示します。

 const [errors、seterrors] = uesestate（{}）;

const validate =（）=> {
  const newErrors = {};
  if（！formdata.name）newErrors.name = '名前が必須';
  if（！formdata.email）{
    newErrors.email = '電子メールが必要です';
  } else if（！ /\ s @\ s \。\ s /.test(formdata.email））{
    newerrors.email = '電子メールは無効です';
  }
  NewErrorsを返します。
};

const handleSubmit =（e）=> {
  E.PreventDefault（）;
  const newErrors = validate（）;
  if（object.keys（newerrors）.length> 0）{
    Seterrors（NewErrors）;
  } それ以外 {
    SetErrors（{}）;
    console.log（ 'フォームは有効です：'、formdata）;
  }
};

JSXで：

 {errors.name && <p style = {{color： &#39;red&#39;}}> {errors.name} </p>}
<入力名= "name" value = {formdata.name} onchange = {handlechange} />

5。リセットおよびプレフィリングフォーム

提出後、フォームをクリアしたい場合があります。

 setFormData（{name： ''、email： ''、age： ''}）;

または、 reset関数を使用してデフォルト値にリセットします。

 const handlereset =（）=> {
  setFormData（{name： ''、email： ''、age： ''}）;
  SetErrors（{}）;
};

既存のデータを編集するには、PROPSで状態を初期化します。

 function edituserform（{user}）{
  const [formdata、setformdata] = uesestate（user）; // Prefill
  // ...
}

6。ライブラリを使用する時期（Reactフックフォームなど）

複雑なフォーム（動的フィールド、ネストされたデータ、非同期検証）については、ライブラリを検討してください。

Reactフックフォームは人気があります：

• REFを使用して制御されていない入力を使用して、再レンダーを減らします。
• 検証ライブラリ（YUP、ZOD）と統合します。
• フィールドの配列の処理を簡素化します（たとえば、複数のアドレス）。

Reactフックフォームの例：

 「React-hook-form」から{useform}をインポートします。

function hookform（）{
  const {register、handlesubmit、formstate：{errors}} = useform（）;

  const onsubmit =（data）=> {
    console.log（data）;
  };

  戻る （
    <form onsubmit = {handlesubmit（onsubmit）}>
      <input {... register（ "name"、{required：true}）} />
      {errors.name && <p>名前が必須</p>}

      <input {... register（ "email"、{必須：true、pattern： /^\ s @\ s $ /i}）} />
      {errors.email && <p>無効な電子メール</p>}

      <button type = "submit">送信</button>
    </form>
  ）;
}

次の場合を使用してください

• あなたは大きいまたは複雑なフォームを持っています。
• パフォーマンスは懸念事項です（再レンダーが少なくなります）。
• 組み込みの検証とエラー処理が必要です。

最終的なヒント

• 常にtype="button" vs type="submit"を使用します。フォーム内のボタンはデフォルトで送信submitます。
• API呼び出し中に送信ボタンでdisabled使用して、二重の提出を防ぎます。
• 「消える」エラーエクスペリエンスが必要な場合は、入力変更のクリアエラー。
• アクセシビリティの問題：適切なラベル、 aria-invalid 、およびエラーメッセージングを使用します。

Reactのフォームハンドリングは難しい必要はありません。制御されたコンポーネントから始めて、uestateから始めて、必要に応じてカスタムフックまたはライブラリに拡大します。重要なのは、状態を予測可能に保ち、ユーザーのフィードバックを明確に保つことです。

基本的に、入力を制御し、送信時に検証し、エラーを表示し、バニラの反応を超えるタイミングを決定します。

以上がReactの処理を形成するための完全なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。