react-hook-form 无法使用自定义输入进行验证

Question

当我只使用时，验证工作正常：空 required-fields 给出错误，填写后，错误消失。但是如果把这个input移到一个单独的组件中，填写的时候错误会消失吗？

代码：

parent:

<InputField
    validationType="underlineText"
    invalidText={errors?.[name]?.message}
    invalid={Boolean(errors?.[name]?.message)}
    {...register(name)}
/>

InputField.tsx:

export const InputField = memo(({
  invalid,
  invalidText,
  validationType,
  ...otherProps
}: IInputProps) => (
  <InputValidationWrapper
    invalid={invalid}
    invalidText={invalidText}
    validationType={validationType}
  >
    <input
      {...otherProps}
    />
  </InputValidationWrapper>
))

Answer 1

由于 react-hook-for 与元素的 ref 一起工作，您需要使用 React.forwardRef 包装您的自定义组件，如下所示：

const InputFieldRef = forwardRef(
  ({ invalid, invalidText, validationType, ...otherProps }, ref) => {
    return (
      <InputValidationWrapper
        invalid={invalid}
        invalidText={invalidText}
        validationType={validationType}
      >
        <input {...otherProps} ref={ref} />
      </InputValidationWrapper>
    );
  }
);

export const InputField = memo(InputFieldRef);

这里是使用上述组件的示例：

<InputField
        validationType="underlineText"
        invalidText={errors?.[name]?.message}
        invalid={Boolean(errors?.[name]?.message)}
        {...register(name, { required: "Field is Required" })}
/>

react-hook-form 无法使用自定义输入进行验证

react-hook-form doesn't work validation with custom input

reactjs

react-hook-form