react-hook-formを使用してラジオボタンのインプットフォームを作成しています。
ラジオボタンの○ぽちを見えなくして、アイコンの画像をボタン代わりに使用したいのですが、以下の問題があり実装できていません。
1. 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件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2023/01/09 10:07
2023/01/14 04:34