[react-hook-form] ラジオボタンのフォームから受け取るdataの値がUndefinedになってしまう

react-hook-formを使用してラジオボタンのインプットフォームを作成しています。
ラジオボタンの○ぽちを見えなくして、アイコンの画像をボタン代わりに使用したいのですが、以下の問題があり実装できていません。

１. CSSでdisplay:noneとすると、データの値がundefinedになってしまいます。このdisplay:noneの設定なしだと問題なくvalueが送信できます。
2. 同じく、アイコンをクリックすると（checked）ボーダーがアイコン周りに付くようにCSS設定しているのですが、display:noneのスタイルありでは機能せず、display:noneスタイルなしでは問題なく機能します。

お知恵を貸していただけますと幸いです。

実現したいこと

ラジオボタンのまるポチを非表示にし、かつフォームが機能（undefinedでないdata valueを送信する、checkできる）するようにする

イメージ説明

発生している問題・エラーメッセージ

現状エラーメッセージなどはありません。

該当のソースコード

3つのコンポーネントから成り立っています。

CustomRadioBtn.module.css

tsx
1.radioInput + .radioLabel:before{
2    content: "";
3    display: inline-block;
4    background-size: contain;
5    width: 140px;
6    height: 140px;
7}
8
9.radioLabel {
10  border-radius: 10px;
11  color: gray;
12  cursor: pointer;
13  margin: auto;
14  position: relative;
15  text-align: center;
16  transition: 0.5s;
17}
18
19.radioInput[value="slept less than 7hrs"]+.radioLabel:before{
20	background-image: url(../../../public/images/sleep/lessThan7hrs.png);
21}
22.radioInput[value="slept more than 7hrs"]+.radioLabel:before{
23	background-image: url(../../../public/images/sleep/moreThan7hrs.png);
24}
25
26/* below styling is not working */
27.radioInput:checked + .radioLabel::before{
28  border: 3px solid #000;
29}
30.radioInput{
31  display: none;
32}

CustomeIconContainer.tsx

tsx
1import { Controller, useForm } from "react-hook-form";
2import styled from "styled-components";
3import CustomIconInputForm from "../molecules/CustomIconInputForm";
4import StyledFlexboxRow from "components/layouts/Flexbox/StyledFlexboxRow";
5
6type Tdata = {
7  sleep?: string;
8  stool?: string;
9  movement?: string;
10};
11
12interface IContainerProps {
13  name: string;
14  options: string[];
15  desc: string;
16  iconLog?: TIconValueData;
17}
18
19export type TIconValueData = {
20  id?: number;
21  sleep?: string;
22  movement?: string;
23  stool?: string;
24};
25
26/**
27 * CustomIconContainer - handle icon input
28 */
29const CustomIconContainer = (props: IContainerProps) => {
30
31  const { name, options, desc } = props;
32  const { handleSubmit, control } = useForm();
33 
34  const onSubmit = (data: Tdata) => {
35    if (data === undefined) {
36      throw new Error("your log is undefined");
37    }
38    
39    console.log(data);
40  };
41
42  const StyledLabel = styled.label`
43    display: block;
44  `;
45
46  return (
47    <div className="CustomIconContainer">
48      <form onSubmit={handleSubmit(onSubmit)}>
49        <StyledLabel>{desc}</StyledLabel>
50        {/* mapping icon buttons */}
51        <StyledFlexboxRow>
52          {options.map((option, index) => (
53            <Controller
54              key={index}
55              name={name}
56              control={control}
57              render={({ field: { onChange, ref, ...props } }) => (
58                <CustomIconInputForm
59                  {...props}
60                  onChange={onChange}
61                  value={option}
62                  inputRef={ref}
63                  desc={option}
64                />
65              )}
66            />
67          ))}
68        </StyledFlexboxRow>
69        <button type="submit">Save</button>
70      </form>
71    </div>
72  );
73};
74export default CustomIconContainer;

CustomIconInputForm.tsx

tsx
1import { IconDefinition } from "@fortawesome/fontawesome-common-types";
2import { RefCallBack } from "react-hook-form";
3import styles from "./CustomRadioBtn.module.css";
4
5interface ICustomIconProps {
6  onChange?: () => void;
7  name?: string;
8  value?: string;
9  icon?: IconDefinition;
10  desc: string;
11  inputRef?: RefCallBack;
12}
13
14const CustomIconInputForm = (props: ICustomIconProps) => {
15  
16  const { name, onChange, inputRef, value } = props;
17
18  const onChangeHandler = () => {
19    if (value !== undefined) {
20      onChange && onChange();
21    }
22  };
23  return (
24    <span className="CustomIconInputForm">
25      <input
26        ref={inputRef}
27        name={name}
28        value={value}
29        onChange={() => {
30          onChangeHandler;
31        }}
32        type="radio"
33        {...props}
34        className={styles.radioInput}
35      />
36
37      <label htmlFor={name} className={styles.radioLabel}>
38      </label>
39    </span>
40  );
41};
42export default CustomIconInputForm;

試したこと

下記の対応をしてみたのですが変化ありませんでした。

Font Awesomeではなく画像ダウンロードに切り替えた。
styled.componentからcss moduleに切り替えた。

上記から、CSSではなさそうな気がします。おそらくreact-hook-formだと思うのですが、どこが抜けているのかまだ掴めていません。

補足情報（FW/ツールのバージョンなど）

Nextjs: "13.1.1"
react-hook-form: "^7.41.1"

行動規範の内容に同意します

回答1件

ベストアンサー

display none を使わずに動いた例です

tsx

tsx
1
2import axios from "axios";
3import ImageRadioCss from "./ImageRadio.module.css";
4
5import { useForm } from "react-hook-form";
6import { useState } from 'react'
7
8const ImageRadio = () => {
9  const { register, handleSubmit } = useForm();
10
11  const items = ["item1", "item2"]
12  const [selectedItem, setItem] = useState("");
13
14  const requestURL = "https://httpbin.org/post";
15  const [getData, setResponse] = useState({ form: { item: "" } });
16
17  const onSubmit = (data: any) => {
18    axios.post(requestURL, new URLSearchParams({ item: selectedItem })).then((response) => {
19      setResponse(response.data);
20    });
21  };
22  const handleChange = (e: any) => {
23    setItem(e.target.value);
24  };
25
26  return (
27    <div className="App">
28      <h1>Form ImageRadio</h1>
29      <form onSubmit={handleSubmit(onSubmit)}>
30        <div>
31        </div>
32        {items.map((item) => {
33          return (
34            <div key={item}>
35              <input
36                className={ImageRadioCss["item-input"]}
37                id={item}
38                type="radio"
39                {...register('item')}
40                value={item}
41                onChange={handleChange}
42                checked={item === selectedItem}
43              />
44              <label
45                htmlFor={item}
46
47                className={ImageRadioCss[item]}
48              >
49              </label>
50            </div>
51          );
52        })}
53        <button type="submit">Submit</button>
54      </form>
55      <div>
56        <h2>Item</h2>
57        <p>{getData['form']['item']}</p>
58      </div>
59    </div>
60
61  );
62}
63
64export default ImageRadio;

Css module

css
1
2/* item1 / item2 のプロパティは共通化してない */
3.item1 {
4  content: "";
5  display: inline-block;
6  background-size: contain;
7  width: 100px;
8  height: 60px;
9  background-image: url(./images/1.png);
10}
11
12.item2 {
13  content: "";
14  display: inline-block;
15  background-size: contain;
16  width: 100px;
17  height: 60px;
18  background-image: url(./images/2.png);
19}
20
21.item-input:checked + label {
22  border: 5px solid red;
23  box-sizing: border-box;
24}
25.item-input {
26  display:none;
27}
28
29

投稿2023/01/09 07:20

yuma.inaura

総合スコア1446

回答へのコメント

Chihiro

2023/01/09 10:07

ありがとうございます。いただいた内容を参考にして試してみます。取り急ぎ、お礼のお返事まで。

Chihiro

2023/01/14 04:34

yuma.inaura様、きちんとしたお返事が遅れてしまいまして、申し訳ございません。いただいた回答を参考に試してみたところ、ラジオボタン非表示でフォームの実装ができました。おそらく、Controllerを使用していたせいかもしれません。コードがかなり冗長的になってしまいましたが、Controllerを使用せず各セクションごとにregisterを使用したことでできました。改めまして、ありがとうございました。

行動規範の内容に同意します