useForm registerでデータ取得できない時の解決方法

はじめに

checkboxのデータをコンソールで取得できないため、そちらの解決方法について共有いたします。

下記のように記述していました。

Register.tsx

import { Box, Card, CardBody, CardHeader, FormLabel, Heading, Input, Radio, RadioGroup, Stack, Textarea } from "@chakra-ui/react"
import { useForm } from "react-hook-form";

export const Register = () => {
    const { register, handleSubmit } = useForm();

    return (
        <div>
            <Card>
                <CardHeader>
                    <Heading size='md'>新規名刺登録</Heading>
                </CardHeader>
                <CardBody>
                    <Box>
                    <form onSubmit={handleSubmit((data) => {
                        console.log("dataの中身",data);
                    })}>
                        <FormLabel>ユーザーID</FormLabel>
                          <Input type="text" placeholder="ユーザーIDを入力してください" {...register("user_id") }/>
                        <FormLabel>名前</FormLabel>
                          <Input type="text" placeholder="名前を入力してください" {...register("name")}/>
                        <FormLabel>自己紹介</FormLabel>
                          <Textarea placeholder="自己紹介文を入力してください。HTMLタグも使えます" {...register("description")}/>
                        <FormLabel>好きな技術</FormLabel>
                          <RadioGroup {...register("skill")}>
                            <Stack direction='row'>
                              <Radio value='React'>React</Radio>
                              <Radio value='TypeScript'>TypeScript</Radio>
                              <Radio value='Github'>Github</Radio>
                            </Stack>
                          </RadioGroup>
                        <FormLabel>GitHub ID</FormLabel>
                          <Input placeholder="IDを入力してください" {...register("github_id")} />
                        <FormLabel>Qiita ID</FormLabel>
                          <Input placeholder="IDを入力してください" {...register("qiita_id")} />
                        <FormLabel>X ID</FormLabel>
                          <Input placeholder="IDを入力してください" {...register("x_id")} />
                        <Input type="submit" />
                    </form>
                    </Box>
                </CardBody>
            </Card>


        </div >
    )

}

解決方法

controllerを使用する

.Register.tsx

import { Box, Card, CardBody, CardHeader, Checkbox, CheckboxGroup, FormLabel, Heading, Input, Radio, RadioGroup, Stack, Textarea } from "@chakra-ui/react"
import { Controller, useForm } from "react-hook-form";

export const Register = () => {
  const { register, handleSubmit, control } = useForm();

  return (
    <div>
      <Card>
        <CardHeader>
          <Heading size='md'>新規名刺登録</Heading>
        </CardHeader>
        <CardBody>
          <Box>
            <form onSubmit={handleSubmit((data) => {
              console.log("dataの中身", data);
            })}>
              <FormLabel>ユーザーID</FormLabel>
              <Input type="text" placeholder="ユーザーIDを入力してください" {...register("user_id")} />
              <FormLabel>名前</FormLabel>
              <Input type="text" placeholder="名前を入力してください" {...register("name")} />
              <FormLabel>自己紹介</FormLabel>
              <Textarea placeholder="自己紹介文を入力してください。HTMLタグも使えます" {...register("description")} />
              <FormLabel>好きな技術</FormLabel>
              <Controller // controller使用しないと制御できない
                name="checkbox_data" // どのﾌｨｰﾙﾄﾞを管理するか指定
                defaultValue={[]} // ﾃﾞﾌｫﾙﾄの値
                control={control} // ﾌｫｰﾑｺﾝﾎﾟｰﾈﾝﾄを管理すためのもの
                render={({ field }) => { // fieldという決まった名称のオブジェクト
                  return (
                    <CheckboxGroup {...field}>
                      <Stack direction='row'>
                        <Checkbox value='React'>React</Checkbox>
                        <Checkbox value='TypeScript'>TypeScript</Checkbox>
                        <Checkbox value='Github'>Github</Checkbox>
                      </Stack>
                    </CheckboxGroup>
                  );
                }}
              />
              <FormLabel>GitHub ID</FormLabel>
              <Input placeholder="IDを入力してください" {...register("github_id")} />
              <FormLabel>Qiita ID</FormLabel>
              <Input placeholder="IDを入力してください" {...register("qiita_id")} />
              <FormLabel>X ID</FormLabel>
              <Input placeholder="IDを入力してください" {...register("x_id")} />
              <Input type="submit" />
            </form>
          </Box>
        </CardBody>
      </Card>
    </div >
  )
}

参考

おわりに

registerが使えな時の実装方法について学ぶことができました。