如何解决带有 SliderComponent 输入的 react-hook -form
我是 React 新手,我正在尝试以 React Hook 形式使用 SliderComponent,但我似乎无法完全理解 Controller 的工作原理。
这是我使用 GET /_search
{
"query": {
"bool": {
"should": [
{
"nested": {
"path": "regions","query": {
"bool": {
"filter": [
{
"term": {
"regions.name": "Region 1"
}
}
]
}
}
}
},{
"nested": {
"path": "regions","query": {
"bool": {
"filter": [
{
"term": {
"regions.name": "Region 2"
}
}
]
}
}
}
}
]
}
}
}
的 SliderComponent:
react-input-slider
这是我的表格:
export default function SliderComponent(props) {
const { axis,xmax,xmin,xstep,onChange } = props;;
return (
<div>
<Slider
axis={axis}
x={value.x}
xmax={xmax}
xmin={xmin}
xstep={xstep}
onChange={onChange}
/>
</div>
);
}
我认为这可能与 useState 有关,并且我无法访问组件的 useState。我读过可能没有必要,有什么帮助吗?谢谢!
解决方法
您说得对,如果您使用 RHF,则不需要 useState
,因为 RHF 会为您处理表单状态。这里重要的是将 onChange
处理程序传递给您的 <SliderComponent />
,以便 RHF 可以监视您的 <SliderComponent />
的值更改并更新表单状态。您还应该为该字段提供一个 defaultValue
,如果您不希望在用户提交前未更改滑块的情况下未定义它。
如果 useState
中没有 <SliderComponent />
,您也可以省略 <SliderComponent />
而只使用 <Slider />
。
function BiometricForm() {
const { handleSubmit,control } = useForm();
const onSubmit = (data) => console.log(data);
return (
<div className="registerForm_Container">
<form onSubmit={handleSubmit(onSubmit)}>
<Controller
control={control}
name="test"
defaultValue={50}
render={({ field: { value,onChange } }) => (
<Slider
axis={"x"}
xmax={100}
xmin={1}
xstep={1}
onChange={({ x }) => onChange(x)}
x={value}
/>
)}
/>
<input type="submit" />
</form>
</div>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。