使用带有自定义 TextInput 的反应钩子表单答案

【问题标题】：use react hook form with custom TextInput使用带有自定义 TextInput 的反应钩子表单
【发布时间】：2021-10-04 11:43:56
【问题描述】：

我正在尝试使用带有自定义 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 is required"),
    password: yup.string().required("Password is required"),
  });

如果我尝试下面的代码。 Typescript 会说我的架构中没有电子邮件字段。

          <input
          {...register("email")}>
          </input>

我仍在尝试修改 TextInput 组件以便能够像这样使用它：

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

但我仍然面临警告Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? TextField 组件应该如何避免该 forwardRef 警告？

【问题讨论】：

标签： javascript reactjs react-hooks react-hook-form

【解决方案1】：

您必须通过ref 和以下是实现该目标的方法之一

export interface TextFieldProps extends React.PropsWithoutRef<JSX.IntrinsicElements["input"]> {
    error: string | undefined;
    label: string;
}

const TextField = forwardRef<HTMLInputElement, LabeledTextFieldProps>({ errorm label, ...props }, ref) => {
    return (
      <>
        <input {...props} ref={ref}></input>
        {error}
      </>
    )
  });

你可以像这样使用它：

<TextField {...register('username')} label="Username label" error={formState.errors.username.message}/>

【讨论】：

在 forwardRef 上缺少一个左括号，应该是：... LabeledTextFieldProps>(({ ...