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