【React】react-hook-formでプルダウンの入力チェックを行う

react-hook-formを使ってプルダウンで選択された値（value）が不正かどうかをチェックする方法です。


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

const Sample = () => {
  const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm({
    mode: 'onChange',
  });

  const gender = [
    {key: '08', label: '茨城県'},
    {key: '09', label: '栃木県'},
    {key: '10', label: '群馬県'},
    {key: '11', label: '埼玉県'},
    {key: '12', label: '千葉県'},
    {key: '13', label: '東京都'},
    {key: '14', label: '神奈川県'},
  ]

  const onSubmit = (data: any) => {
    console.log(data);
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <select {...register('gender', {
        validate: value => {
          return gender.findIndex(item => item.key === value) != -1 ? true : '不正な値です';
        },
      })}>
        {gender.map((item, i) => (
          <option value={item.key} key={item.key}>
            {item.label}
          </option>
        ))}
      </select>
      {errors.gender && <p className="text-white" role="alert">{errors.gender?.message as string}</p>}
      <input type="submit" value="送信" />
    </form>
  )
}

export default Sample;

プルダウンの選択肢となるオブジェクトの配列を用意しておき、mapでループしてプルダウンを生成しています。

registerのオプションのvalidateにコールバック関数を渡すことで値の検証を行うことができます。

「value」には選択されたプルダウンのvalueが入ります。

コールバック関数でtrueを返すと入力チェックOK、 falseもしくはstringでエラーメッセージを返すと入力チェックNGとなります。

findIndexで配列の要素の存在チェックを行うことができるので、存在したらtrue、存在しなかったらエラーメッセージを返すことでプルダウンで選択された値が不正でないかをチェックしています。

IT技術ブログ
↓↓「にほんブログ村」のランキングに参加しています。少しでも面白い、参考になったとか思われたらポチッとしていただけると嬉しいです！

にほんブログ村