React Hook Formでフォーム要素の管理をしてみる

 Reactでフォーム画面を構成したいときに、標準(?)だとinput要素一つ一つにstateを管理するようなつくりで面倒くさいので、React Hook Formが使えそうだったのでなんとくメモ。

非制御コンポーネント (Uncontrolled Components) を、管理下(register)に登録することで、form要素の一括してデータを取り扱える（操作およびvalidateion)ようにしている感じ。
非制御コンポーネントな要素だけだと、Material UIやBootstrapなどでラップしている部品は使えないことになるこえど、そのあたりは考慮されている模様。
今回は、非制御コンポーネントの書き方をメモ。

useState()で状態を一つずつ管理したり、useRef()を使用して参照先を管理するよりはわかりやすいかなぁと。※中身はuseRef()使っているのかも



[ドキュメント]

 　　https://react-hook-form.com/jp/

[インストール]　

　　$npm install react-hook-form

[ソース例] ログイン画面のイメージ
import {useForm} from 'react-hook-form';
function Login(){
    const { register, handleSubmit, formState: { errors },reset } = useForm();
    //Sumit時に呼ばれる処理
    const handleLink = (form_data) => {
        console.log(form_data);
    };
    return (
        <div>
        <form onSubmit={handleSubmit(handleLink)}>
                アカウント：<input type="text" {...register("account", { required: true })} /><br/>
                パスワード:<input type="password" {...register("password", { required: true })} /><br/>
                    <button type="submit">送信</button>
                    <button onClick={()=>{reset()}}>キャンセル</button>
                    <p>{(errors.account || errors.password) && "アカウントとパスワードをどちらも入力してください。"}</p>
                </form>
        </div>
    );
}

[ソース内での書き方]

1. とにもかくにもインポート
   
   import {useForm} from 'react-hook-form';
   
   
2. 関数コンポーネント内で、useForm()を仕様
   useForm()から取得できるものはいろいろとあるけど、以下を使ってみた
   
       register    フォーム要素の関連付け（？）用の関数
       handleSubmit    Submitで呼ばれる関数
       formState:{arrors}    フォーム要素のエラーの状況
       reset  フォーム要素の要素を再設定用の関数
   
   useForm()の引数として、フォームに設定するデフォルト値なんかも設定できる
   
   
3. form要素のonSubmitイベントでuseForm()で取得したhandleSubmitをコール
   
   form要素で送信ボタンなどのsubmitをした際にhadleSubmitが呼ばれるようにする。
   hadleSbumitの引数として、実際に実行したい関数を設定しておく。
   指定した関数への引数として、4.で登録するinput要素のnameをキーにしたオブジェクトが設定されるので、それぞれの要素にアクセスしやすい。
   
   
4. input要素を管理下に登録
   
   useForm()で取得したregisterを使って、input要素を管理下に登録する。
   inputの属性として、registerも戻りが設定されるように記載する。
   
   <input type="text" {...register("account", { required: true,maxLength:{value:5,message:"５文字まで"} })} />
   
   regiserの引数として、第1引数にキーとなる名称、第2引数は任意で、簡易的なバリデーションの情報を設定する
   
   registerの前の...はスプレッド構文 (...) というらしく、オブジェクトや配列などを展開してくれる便利な構文だそうです。
   
   バリデーションは以下が使える。registerでの登録の際にはエラー時のメッセージも登録できる。
       required    必須
       min    最小値
       max    最大値
       minLength    最小文字数
       maxLength    最大文字数
       pattern    正規表現
       validate    オリジナルのチェック関数を設定
   
   
5. reset処理を追加（必要なら）
   resetを使うと管理要素をセットしなおしてくれる。
   引数なしだとすべて空にしてくれるが、オブジェクトでkey:valueを指定することによって
   上の例ではリセットボタンを
   ボタンのタイプをreset(<button type="reset">リセット</button>)としても空にはなる
   その際には、フックの対象にならないので、イベントが走らない。
   
   初期表示の値を入れるのであれば、以下のようにuseEffect()で実行させると入力済みにしてくれる。
   
       useEffect(()=>{
           reset({account:'start_string'})
       },[reset]);