useForm まとめ - everydayProguramming

stateで独自管理と useFormを利用した場合の比較記事

reffect.co.jp

独自state

カラム単位で、useState管理 onSubmitプロパティでhandleSubmitをする => handleSubmitは input type submitのクリックに反応する
オブジェクトで stateを管理する場合

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

function App() {
  const [formData, setFormData] = useState({ email: '', password: '' });

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);
  };

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };
  return (
    <div className="App">
      <h1>ログイン</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="email">Email</label>
          <input
            id="email"
            name="email"
            value={formData.email}
            onChange={handleChange}
          />
        </div>
        <div>
          <label htmlFor="password">パスワード</label>
          <input
            id="password"
            name="password"
            value={formData.password}
            onChange={handleChange}
            type="password"
          />
        </div>
        <div>
          <button type="submit">ログイン</button>
        </div>
      </form>
    </div>
  );
}

export default App;

useRefを利用した場合

refプロパティを利用して管理できるらしい
react から useRef があるらしい。「onChangeで値の監視いらないらしい」

import './App.css';
import { useRef } from 'react';

function App() {
  const emailRef = useRef(null);
  const passwordRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log({
      emai: emailRef.current.value,
      password: passwordRef.current.value,
    });
  };

  return (
    <div className="App">
      <h1>ログイン</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="email">Email</label>
          <input id="email" name="email" ref={emailRef} />
        </div>
        <div>
          <label htmlFor="password">パスワード</label>
          <input
            id="password"
            name="password"
            ref={passwordRef}
            type="password"
          />
        </div>

        <div>
          <button type="submit">ログイン</button>
        </div>
      </form>
    </div>
  );
}

export default App;

useFormを利用

useForm registerで値管理

import './App.css';
import { useForm } from 'react-hook-form';

function App() {
  const { register, handleSubmit } = useForm();

  const onSubmit = (data) => console.log(data);

  return (
    <div className="App">
      <h1>ログイン</h1>
      <form onSubmit={handleSubmit(onSubmit)}>
        <div>
          <label htmlFor="email">Email</label>
          <input id="email" {...register('email')} />
        </div>
        <div>
          <label htmlFor="password">Password</label>
          <input id="password" {...register('password')} type="password" />
        </div>
        <button type="submit">ログイン</button>
      </form>
    </div>
  );
}

export default App;

基本的なバリデーション

<input
  id="password"
  {...register('password', {
    required: {
      value: true,
      message: '入力が必須の項目です。',
    },
    pattern: {
      value: /^[A-Za-z]+$/,
      message: 'アルファベットのみ入力してください。',
    },
    minLength: {
      value: 8,
      message: '8文字以上入力してください。',
    },
  })}
  type="password"
/>

registerとcontrollerの違いについて

scrapbox.io

コントーラブルとアンコトーラブルの概念の違いがある
再レンダリングタイミングが異なるのでバフォーマンスに差が出るらしい

Controllerの使い方

react-hook-form.com

This object contains methods for registering components into React Hook Form.

とドキュメントにはあるので、外部のコンポーネントを管理できるようにするやつか？

import React from "react"
import { useForm, Controller } from "react-hook-form"
import { TextField } from "@material-ui/core"

type FormInputs = {
  firstName: string
}

function App() {
  const { control, handleSubmit } = useForm<FormInputs>()
  const onSubmit = (data: FormInputs) => console.log(data)

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        as={TextField}
        name="firstName"
        control={control}
        defaultValue=""
      />

      <input type="submit" />
    </form>
  )
}

参考記事

scrapbox.io