反应挂钩形式动态输入控件不起作用
React hook form dynamic input control not working
我正在使用 React Hook 表单,我想根据一个单选按钮的选定条件动态设置一个文本输入框。我有跟踪送货方式的单选按钮,包括家庭、办公室和其他方式。如果用户单击其他,我想显示一个输入框并隐藏单选按钮。我希望这是有道理的。我试了很多方法都不行。任何想法都会对我无法正常工作有所帮助
{(watch('tag') == 'others') ? <Input
{...register('otherField')}
label="Others"
variant="outline"
className="col-span-2 w-full"
/>:
<div className="flex items-center space-x-4 rtl:space-x-reverse">
<Radio
id="home"
{...register('tag')}
type="radio"
value={'home'}
label="Home"
name={'tag'}
/>
<Radio
id="work"
{...register('tag')}
type="radio"
value={'Work'}
label="Work"
name={'tag'}
/>
<Radio
id="others"
{...register('tag')}
type="radio"
value={'others'}
label="Others"
name={'tag'}
/>
</div>
}
单选按钮组件
import React, { InputHTMLAttributes } from 'react';
import styles from './radio.module.css';
export interface Props extends InputHTMLAttributes<HTMLInputElement> {
className?: string;
label?: string;
name: string;
id: string;
error?: string;
}
const Radio = React.forwardRef<HTMLInputElement, Props>(
({ className, label, name, id, error, ...rest }, ref) => {
return (
<div className={className}>
<div className="flex items-center">
<input
id={id}
name={name}
type="radio"
ref={ref}
className={styles.radio_input}
{...rest}
/>
<label htmlFor={id} className="text-body text-sm">
{label}
</label>
</div>
{error && (
<p className="my-2 text-xs ltr:text-right rtl:text-left text-red-500">
{error}
</p>
)}
</div>
);
}
);
export default Radio;
你好,我刚刚将你的代码复制到这个沙盒中,它运行良好:codesandbox
App.js
import "./styles.css";
import { useForm } from "react-hook-form";
import Radio from "./Radio";
export default function App() {
const { register, handleSubmit, watch } = useForm();
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
{watch("tag") === "others" ? (
<input
{...register("otherField")}
variant="outline"
className="col-span-2 w-full"
/>
) : (
<div className="flex items-center space-x-4 rtl:space-x-reverse">
<form>
<Radio
id="home"
{...register("tag")}
type="radio"
value={"home"}
label="Home"
name={"tag"}
/>
<Radio
id="work"
{...register("tag")}
type="radio"
value={"Work"}
label="Work"
name={"tag"}
/>
<Radio
id="others"
{...register("tag")}
type="radio"
value={"others"}
label="Others"
name={"tag"}
/>
<button onClick={handleSubmit((val) => console.log(val))}>
click
</button>
</form>
</div>
)}
</div>
);
}
我正在使用 React Hook 表单,我想根据一个单选按钮的选定条件动态设置一个文本输入框。我有跟踪送货方式的单选按钮,包括家庭、办公室和其他方式。如果用户单击其他,我想显示一个输入框并隐藏单选按钮。我希望这是有道理的。我试了很多方法都不行。任何想法都会对我无法正常工作有所帮助
{(watch('tag') == 'others') ? <Input
{...register('otherField')}
label="Others"
variant="outline"
className="col-span-2 w-full"
/>:
<div className="flex items-center space-x-4 rtl:space-x-reverse">
<Radio
id="home"
{...register('tag')}
type="radio"
value={'home'}
label="Home"
name={'tag'}
/>
<Radio
id="work"
{...register('tag')}
type="radio"
value={'Work'}
label="Work"
name={'tag'}
/>
<Radio
id="others"
{...register('tag')}
type="radio"
value={'others'}
label="Others"
name={'tag'}
/>
</div>
}
单选按钮组件
import React, { InputHTMLAttributes } from 'react';
import styles from './radio.module.css';
export interface Props extends InputHTMLAttributes<HTMLInputElement> {
className?: string;
label?: string;
name: string;
id: string;
error?: string;
}
const Radio = React.forwardRef<HTMLInputElement, Props>(
({ className, label, name, id, error, ...rest }, ref) => {
return (
<div className={className}>
<div className="flex items-center">
<input
id={id}
name={name}
type="radio"
ref={ref}
className={styles.radio_input}
{...rest}
/>
<label htmlFor={id} className="text-body text-sm">
{label}
</label>
</div>
{error && (
<p className="my-2 text-xs ltr:text-right rtl:text-left text-red-500">
{error}
</p>
)}
</div>
);
}
);
export default Radio;
你好,我刚刚将你的代码复制到这个沙盒中,它运行良好:codesandbox
App.js
import "./styles.css";
import { useForm } from "react-hook-form";
import Radio from "./Radio";
export default function App() {
const { register, handleSubmit, watch } = useForm();
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
{watch("tag") === "others" ? (
<input
{...register("otherField")}
variant="outline"
className="col-span-2 w-full"
/>
) : (
<div className="flex items-center space-x-4 rtl:space-x-reverse">
<form>
<Radio
id="home"
{...register("tag")}
type="radio"
value={"home"}
label="Home"
name={"tag"}
/>
<Radio
id="work"
{...register("tag")}
type="radio"
value={"Work"}
label="Work"
name={"tag"}
/>
<Radio
id="others"
{...register("tag")}
type="radio"
value={"others"}
label="Others"
name={"tag"}
/>
<button onClick={handleSubmit((val) => console.log(val))}>
click
</button>
</form>
</div>
)}
</div>
);
}