【React】react-hook-formで全てのチェックボックスのチェックする方法

React（Next.js）のreact-hook-formで複数のチェックボックスが存在する場合に全てのチェックボックスにチェックする方法です。

下記のようにしたらできました。

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

const Sample = () => {
  const osList = ['WindowsXP', 'WindowsVista', 'Windows7', 'Windows8', 'Windows8.1', 'Windows10', 'Windows11']

  const {
    register,
    handleSubmit,
    setValue,
    formState: { errors },
  } = useForm();

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

  return (
      <form onSubmit={handleSubmit(onSubmit)}>
        {osList.map((os, index) => (
          <div key={index}>
            <input
              type="checkbox"
              value={os}
              {...register(`windows.${index}`, {})}
            />
            <label htmlFor="">{os}</label>
          </div>
        ))}
        <input type="button" value="全てにチェック" onClick={() => {
          osList.map((os, index) => {
            setValue('windows', { [index]: true})
          })
        }} />
        <input type="button" value="全てにチェックを外す" onClick={() => {
          osList.map((os, index) => {
            setValue('windows', { [index]: false})
          })
        }} />
        <input type="submit" value="送信" />
      </form>
  );
}

export default Sample;

ネストされた項目ってどうやってsetValueするんだ？って思いましたが、公式ドキュメントにしっかり書いてありました。

ドキュメント読むの大事ですね^^;

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

にほんブログ村