相关疑难解决方法(0)

我正在尝试将 React hook 形式与自定义 TextInput 结合使用。在我使用材料输入之前，一切都工作正常。我找到了一种可以实现这一目标的方法，但我对此并不满意。

我正在使用useForm钩子

  const {
    register,
    handleSubmit,
    formState: { errors, isValid },
  } = useForm<FormValues>({ resolver: yupResolver(schema), mode: "all" });

我的自定义 TextField （非常简单，因为现在我只想将其注册到表单中）：

export interface TextFieldProps {
    id: string;
    error: string | undefined;
    label: string;
    register: UseFormRegister<any>
}

const TextField = ({ id, error, label, register }: TextFieldProps): JSX.Element => {
    return <>
    <input {...register(`${id}`)}></input>
    {error}
    </>
  };

使用该组件：

          <TextField
            register={register}
            id="username"
            label="Username"
            error={errors.username?.message}
          />

这段代码可以工作，但我失去了IMO非常好的功能 - 检查我传递给注册函数的名称。例如，我声明了一些模式：

  const schema = yup.object({
    username: yup.string().required("Username …