Reactjs react hook-表单与滑块组件输入

我是新来的反应，我试图使用一个反应钩形式的幻灯片组件，但我似乎不能完全理解控制器是如何工作的

这是我的幻灯片组件，它使用

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>
  );
}

导出默认功能滑块组件（道具）{
const{axis，xmax，xmin，xstep，onChange}=props；；
返回(
);
}

这是我的表格：

export default function BiometricForm() {
      const { handleSubmit, control } = useForm();
    
  return (
    <div className="registerForm_Container">
      <form onSubmit={handleSubmit(onsubmit)}>
        <Controller
          control={control}
          name="test"
          render={({ props: { x, axis, xmax, xmin, xstep } }) => (
            <SliderComponent
              axis={"x"}
              xmax={100}
              xmin={1}
              xstep={1}
              value={x}
              onChange={(e) => x.onChange(parseInt(e.target.value))}
            />
          )}
        />
        <button className="registerForm_Container_button" type="submit">
          Register
        </button>
      </form>
    </div>
  );
}

导出默认函数表单（）{
const{handleSubmit，control}=useForm（）；
返回(
(
x、 onChange（parseInt（e.target.value））}
/>
)}
/>
登记
);
}

---

我认为这可能与useState有关，并且我无法达到组件的useState。我读到可能没有必要，有什么帮助吗？谢谢大家!

您完全正确，如果您使用RHF，您不需要使用

useState

，因为RHF为您处理表单状态。这里重要的是将

onChange

处理程序传递给

，以便RHF可以监视

的值更改并更新表单状态。如果用户在提交之前不更改滑块，您不希望字段未定义，则还应为字段提供

defaultValue

如果

中没有

useState

，也可以省略

，只使用

函数形式（）{
const{handleSubmit，control}=useForm（）；
const onSubmit=（数据）=>console.log（数据）；
返回(
(
onChange（x）}
x={value}
/>
)}
/>
);
}

---

你完全正确！！它就像一个魅力，我试图调整我的组件，以便我可以重用它，但出现了一些错误，所以我将按照您的建议，直接使用滑块。非常感谢您抽出时间！如果您想重用滑块，最好创建自己的自定义组件。是另一个代码沙盒，它使用附加的自定义滑块组件重新创建问题的用例。也许这会有助于找到你的错误。非常感谢@knoefel，非常棒的帮助，codeSandbox非常清晰，非常有用。再次感谢你，你让我开心！

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>
  );
}