反応フック形による型枠形成

反応のフォームを処理するような反復タスクを行ういくつかの時間の後.JSは、再利用に抽象化できるボイラプレートコードがたくさんあることに気づくでしょうcustom hooks . 幸いにも、既存のオープンソースソリューションがたくさんあります.この場合、我々は使用されます react-hook-form .

反応フック形式とは

react-hook-form は、柔軟な、拡張可能なフォームのライブラリを処理するためのライブラリです.それはあなたの機能的なコンポーネントの中で呼び出すことができるカスタムフックをエクスポートし、両方のregister 関数として渡すref あなたにinput コンポーネント、およびhandleSubmit 関数コールバックをラップする.
帰ることによってregister に追加される関数input コンポーネント、私たちはUncontrolled Component パターンは、不要な再レンダリングを避けることによって、より速く、より多くの演奏者を作るために.

我々は何を構築するつもりですか？

(物事を)理解するreact-hook-form することができます我々は、単純なアプリケーションの文字とリストのリストを我々のリストに追加するために構築を行うことができます.

アプリケーションの設定

入る前にreact-hook-form , 我々は、基本的なファイル構造と機能を使用してアプリケーションを準備する必要があります.このために、我々は新しい反応アプリケーションを作成します(あなたの好みのスターターまたは雲のIDEを使用することができます).
アプリケーションのセットアップをスキップする場合は、先に行くとフォークすることができますthis CodeSandbox , しかし、私は非常には、少なくともこのセクションを読むことをお勧めしますどのようなアプリのより良い理解を持っている.

1 .文字リスト

まず、文字を表示する新しいコンポーネントを作成します.
文字一覧.js

import React from "react";

function CharacterList({ characters }) {
  return (
    <div>
      <h2>Character List</h2>

      {characters.length === 0 ? (
        <p>
          <em>Your character list is empty</em>
        </p>
      ) : (
        <ul>
          {characters.map((character, id) => (
            <li key={id}>
              {character.name} (<strong>{character.species}</strong>)
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default CharacterList;

あなたが反応の基本的な理解を持っているならば、あなたは我々に気がつきますCharacterList コンポーネントはcharacters prop.プロパティを持つオブジェクトの配列です.name and species . 配列が空の場合、プレースホルダをレンダリングします.他の場所では、リストをレンダリングします.

2 .文字フォームの追加

番目のステップは、フォームに新しい文字をリストに追加するコンポーネントを作成することです.
キャラクターフォーム.js

import React from "react";

function CharacterForm({ addCharacter }) {
  const onSubmit = (data) => {
    addCharacter(data);
  };

  return (
    <div>
      <h2>Add character</h2>
      <form onSubmit={onSubmit}>
        <div>
          <input name="name" placeholder="Character name" />
        </div>
        <div>
          <select name="species">
            <option value="sorcerer">Sorcerer</option>
            <option value="knight">Knight</option>
            <option value="human">Human</option>
          </select>
        </div>
        <div>
          <button type="submit">Add character</button>
        </div>
      </form>
    </div>
  );
}

export default CharacterForm;

単独では、このコンポーネントは何もしません.なぜなら、我々は収集したデータで何もしていないからです.これは、このチュートリアルの次のセクションで作業するコンポーネントです.

3 .アプリ

さあ、これを作りましょうApp コンポーネントをレンダリングするCharacterList and CharacterForm .
アプリ.js

import React from "react";

import CharacterList from "./character-list";
import CharacterForm from "./character-form";

function App() {
  const [characters, setCharacters] = React.useState([]);

  const addCharacter = (character) => {
    setCharacters((characters) => [...characters, character]);
  };

  return (
    <div>
      <CharacterList characters={characters} />
      <hr />
      <CharacterForm addCharacter={addCharacter} />
    </div>
  );
}

export default App;

我々は、2009年に我々の性格リストを保存していますcharacters を使用して React.useState フック、それらを渡すCharacterList . また、我々はaddCharacter 文字リストの末尾に新しい文字を追加し、CharacterForm 経由でprop.

それを始めましょう！

我々はアプリケーションのセットアップを持っているので、どのように我々はレバレッジできるかを見てみましょうreact-hook-form 次のレベルに我々のフォームを取る.

フックフックフォーム

yarn add react-hook-form

あなたの特徴にフックフックフォームを加えてください

ここに楽しい.まず、インポートしましょうuseForm からreact-hook-form , コンポーネントのフックを呼び出しますregister and handleSubmit それの方法(心配しないでください、私は彼らがちょうどしばらくの間何をするかについて説明します)、ラップonSubmit 機能付きhandleSubmit , パスregister としてref フォームコントロールのそれぞれについて.
キャラクターフォーム.js

import React from "react";
+import { useForm } from "react-hook-form";

function CharacterForm({ addCharacter }) {
+ const { register, handleSubmit } = useForm();
+
- const onSubmit = (data) => {
- addCharacter(data);
- };
+ const onSubmit = handleSubmit((data) => {
+ addCharacter(data);
+ });

  return (
    <div>
      <h2>Add character</h2>
      <form onSubmit={onSubmit}>
        <div>
- <input name="name" placeholder="Character name" />
+ <input ref={register} name="name" placeholder="Character name" />
        </div>
        <div>
- <select name="species">
+ <select ref={register} name="species">
            <option value="sorcerer">Sorcerer</option>
            <option value="knight">Knight</option>
            <option value="human">Human</option>
          </select>
        </div>
        <div>
          <button type="submit">Add character</button>
        </div>
      </form>
    </div>
  );
}

export default CharacterForm;

レジスタメソッド

によってregister フォームコントロールに対しては、フィールドの値、検証状態、フィールドが触れていたとしても追跡できます.
重要性name を渡すときにpropが必要ですregister refと一意である必要があります.このようにreact-hook-form 場所の値を割り当てる場所を知っているでしょう.詳しくはcheck out the register documentation .

Handlesubmitメソッド

これは、コールバックをラップして実際のフォーム値を渡す関数です.フードの下でもpreventDefault 完全なページ再読み込みを避けるフォームイベント.また、非同期関数にすることもできます.
詳しくはcheck out the handleSubmit documentation .

妥当性検査を追加

この点で、我々は我々のリストに文字を加えることができるワーキングフォームを持ちます.ただし、空の投稿を避けるために、フィールドが満たされているかどうかをチェックしていません.
With react-hook-form , それを呼び出すのと同じくらい簡単ですregister 検証規則を定義する設定オブジェクトを持つ関数です.我々の場合は、我々はname 必須フィールド.また、抽出することができますerrors からuseForm フィールドがエラーの場合、ユーザーを表示します.

import React from "react";
import { useForm } from "react-hook-form";

function CharacterForm({ addCharacter }) {
- const { register, handleSubmit } = useForm();
+ const { register, handleSubmit, errors } = useForm();

  const onSubmit = handleSubmit((data) => {
    addCharacter(data);
  });

  return (
    <div>
      <h2>Add character</h2>
      <form onSubmit={onSubmit}>
        <div>
- <input ref={register} name="name" placeholder="Character name" />
+ <input
+ ref={register({ required: true })}
+ name="name"
+ placeholder="Character name"
+ />
+ {errors.name && errors.name.type === "required"
+ ? "Name is required"
+ : null}
        </div>
        <div>
          <select ref={register} name="species">
            <option value="sorcerer">Sorcerer</option>
            <option value="knight">Knight</option>
            <option value="human">Human</option>
          </select>
        </div>
        <div>
          <button type="submit">Add character</button>
        </div>
      </form>
    </div>
  );
}

export default CharacterForm;

フォームの状態をリセットする

最後のステップは、文字リストに文字を追加した後にフォームをクリアすることです.そのためには、新しい方法をuseForm フックreset , そして、addCharacter .

import React from "react";
import { useForm } from "react-hook-form";

function CharacterForm({ addCharacter }) {
- const { register, handleSubmit, errors } = useForm();
+ const { register, handleSubmit, errors, reset } = useForm();

  const onSubmit = handleSubmit((data) => {
    addCharacter(data);
+ reset();
  });

  console.log(errors.nameRequired);

  return (
    <div>
      <h2>Add character</h2>
      <form onSubmit={onSubmit}>
        <div>
          <input
            ref={register({ required: true })}
            name="name"
            placeholder="Character name"
          />
          {errors.name && errors.name.type === "required"
            ? "Name is required"
            : null}
        </div>
        <div>
          <select ref={register} name="species">
            <option value="sorcerer">Sorcerer</option>
            <option value="knight">Knight</option>
            <option value="human">Human</option>
          </select>
        </div>
        <div>
          <button type="submit">Add character</button>
        </div>
      </form>
    </div>
  );
}

export default CharacterForm;

詳しくはcheck out the reset documentation .

前進

今、あなたの反応フォームを管理する方法のより良い意味を持って、あなたのようなバトルテストとコミュニティ検証ライブラリを使用して可能性の新しい世界をロック解除しているreact-hook-form .
もっと見ることができますadvanced use cases , additional resources あるいはtake a look at the full API .
あなたが完成したコードサンプルが欲しいならば、あなたはチェックアウトすることができますthis CodeSandbox .
このドットラボは、企業のデジタル変換の努力を実現支援に焦点を当てた現代のWebコンサルティングです.専門家の建築指導、訓練、またはコンサルティング、角度、Vue、Webコンポーネント、Graphql、ノード、バゼル、またはポリマー、訪問thisdotlabs.com .
このドットメディアは、すべての包括的で教育的なウェブを作成することに集中します.我々は最新のイベント、ポッドキャスト、および無料のコンテンツを介して近代的なWebの進歩と最新の状態に保つ.学ぶthisdot.co .