反应钩子形式的 getValues() 返回未定义

Question

问题：

如何在不对每个输入使用 setValue() 的情况下使用 react-hook-form 的控制器访问表单的值？

问题： 我正在创建自己的一组可重用组件，并尝试使用 React Hook Form 的 Controller 来管理状态等。我在访问输入值时遇到问题并不断获得 undefined。但是，如果我首先使用 setValue().

它将起作用

CodeSandbox example

 return (
    <form onSubmit={onSubmit}>
      <WrapperInput
        name="controllerInput"
        label="This input uses Controller:"
        type="text"
        rules={{ required: "You must enter something" }}
        defaultValue=""
      />
      <button
        type="button"
        onClick={() => {
          
          // getValues() works if use following setValue()
          const testSetVal = setValue("controllerInput", "Hopper", {
            shouldValidate: true,
            shouldDirty: true
          });

          // testGetVal returns undefined if setValue() is removed
          const testGetVal = getValues("controllerInput");
          console.log(testGetVal);
        }}
      >
        GET VALUES
      </button>

      <button type="submit">Submit</button>
    </form>
  );

更多信息：

我不明白为什么 getValues() 返回 undefined。当我在 React 开发工具中查看 control 对象时，我可以看到该值已保存。我也收到 undefined 表单提交。

我这里的一般方法是使用原子 Input.tsx 组件来处理输入样式。然后我使用 WrapperInput.tsx 使用 react-hook-fom 将其转换为受控输入。

Answer 1

改为将 control 提升到父级，并将其作为 prop 传递给可重用组件。

// RegistrationForm.tsx
...
  const {
    setValue,
    getValues,
    handleSubmit,
    formState: { errors },
    control, 
  } = useForm();
...

return (
  ...
      <WrapperInput
        control={control} // pass it here
        name="controllerInput"
        label="This input uses Controller:"
        type="text"
        rules={{ required: "You must enter something" }}
        defaultValue=""
      />
)

// WrapperInput.tsx
const WrapperInput: FC<InputProps> = ({
  name,
  rules,
  label,
  onChange,
  control, /* use control from parent instead  */
  defaultValue,
  ...props
}) => {
  return (
    <div>
      <Controller
        control={control}
        name={name}
        defaultValue={defaultValue}
        render={({ field }) => <Input label={label} {...field} />}
      />
    </div>
  );
};

Codesandbox

反应钩子形式的 getValues() 返回未定义

react hook form's getValues() returning undefined

reactjs

react-hook-form