React hook 表单在传递到组件时不处理验证

Question

我正在以一种非常简单的方式使用

react hook form

来处理验证：

import { Input } from "@nextui-org/react";

export const LoginForm = () => {
  const {
    register,
    handleSubmit,
    formState: { errors, isValid, isSubmitting },
  } = useForm<LoginSchema>({
    resolver: zodResolver(loginSchema),
    mode: "onTouched",
  });

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Input
        defaultValue=""
        {...register("email")}
        isInvalid={!!errors.email}
        errorMessage={errors?.email?.message}
        label="Email"
        type="email"
        variant="bordered"
      />
    </form>
  );
};

效果非常好。当用户输入无效的电子邮件并在输入范围之外单击时，会显示错误消息。

输入组件来自 NextUi 库。我想创建一个代理组件来呈现该输入组件。我所做的就是：

import {
  Input as NextInput,
  type InputProps as NextInputProps,
} from "@nextui-org/react";
import { type FC } from "react";

export const Input: FC<InputProps> = ({ ...rest }) => {
  return <NextInput {...rest} />;
};

该组件是一个完整的代理组件，不做任何事情；我想要它，这样我就可以自定义我的输入。但是，当在 LoginForm 中使用此代理时，验证不起作用，即 onBlur 和 onChange 不再触发，因此如果用户填写电子邮件，然后单击外部，验证错误将保留。

这可能是一个 React 问题，而不是与 React hook 表单库相关。为什么使用

rest

解构所有道具会以某种方式阻止输入验证发挥作用？

Answer 1

没有 onSubmit 处理程序

import { Input } from "@nextui-org/react";

export const LoginForm = () => {
  const {
    register,
    handleSubmit,
    formState: { errors, isValid, isSubmitting },
  } = useForm<LoginSchema>({
    resolver: zodResolver(loginSchema),
    mode: "onTouched",
  });
  
  // on submit handler
const submitHandler = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(submitHandler)}>
      <Input
        defaultValue=""
        {...register("email")}
        isInvalid={!!errors.email}
        errorMessage={errors?.email?.message}
        label="Email"
        type="email"
        variant="bordered"
      />
    </form>
  );
};