带有 SliderComponent 输入的 react-hook -form

Question

我是 React 的新手，我正在尝试以 React Hook 形式使用 SliderComponent，但我似乎无法完全理解 Controller 的工作原理。

这是我的 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>
  );
}

这是我的表格：

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

我认为这可能与 useState 有关，我无法到达组件的 useState。我读过，也许没有必要，有什么帮助吗？谢谢！

Answer 1

您完全正确，如果您使用 RHF，则不需要 useState，因为 RHF 会为您处理表单状态。这里重要的是将 onChange 处理程序传递给您的 <SliderComponent />，以便 RHF 可以监视您的 <SliderComponent /> 的值变化并更新表单状态。如果您不希望用户在提交前未更改滑块而未定义该字段，则还应为该字段提供 defaultValue。

此外，如果 <SliderComponent /> 中没有 useState，您也可以省略 <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>
  );
}

带有 SliderComponent 输入的 react-hook -form

react-hook -form with SliderComponent input

slider

reactjs

react-hook-form