reactjs - React Hook Forms 如何使用 Typescript 将错误作为 Prop 传递

Question

我正在定义一个 useForm。const { handleSubmit, control, errors } = useForm<{email: string}>();现在我正在创建一个单独的组件来处理输入，我将传递 useForm我在上面创建的 Prop 。
这就是组件的样子。

type Props<T> = {
  name: FieldName<T>;
  control: Control<T>;
  errors: FieldErrors<T>;
};

const ControlTextInput = <T extends {}>({
  name,
  control,
  errors,
}: Props<T>) => {
  return (
   
    <Controller
    name={name}
    control={control}
    rules={{
      required:'this is required',
    }}
    render={({ onChange }) => (
        <>
            <TextInput
                onChangeText={(text) => {
                onChange(text);
                }}
            />
            {/* Show my error here */}
            {errors.email && (
                <Text style={{ color: "red" }}>
                    {errors.email?.message}
                </Text>
            )}
      </>
    )}
  />
  );
};

我想使用这样的组件。

   <ControlTextInput<AnyObject>
                    name="email"
                    errors={errors}
                    control={control}
                  />

当我将鼠标悬停在 errors.email 上时出现此错误

Answer 1

React Hook Form 暴露类型 UseControllerProps它接受泛型类型 T 来推断您的输入值类型，或者换句话说 FieldValues类型。最初您定义 FieldValues通过将有关您的字段的类型传递给 useForm 来输入 Hook (请参阅下面的 MyInputTypes)。

interface MyInputTypes {
  email: string;
  password: string;
}

const { register, handleSubmit, watch, formState: { errors } } = useForm<MyInputTypes>();

这意味着您可以创建扩展 UseControllerProps 的接口(interface)并有您的通用 T interface Props<T> extends UseControllerProps<T> {} .类型 UseControllerProps已经包含 name 的类型定义和 control因此您不需要在您的界面中单独定义它们(除非您想要或有特殊要求/理由这样做)。关于 errors适当的解决方案 Imo(因为您只需要关于单个字段的错误)将直接传递类型为 FieldError | undefined 的特定错误。 .结果看起来像下面的代码。

interface Props<T> extends UseControllerProps<T> {
  error: FieldError | undefined
}

然后你可以简单地使用你的 ControlTextInput 如下。

<ControlTextInput name="email" error={errors.email} />

在组件(使用 ControlTextInput)中，您的通用 T 必须扩展 FieldValues最终，正是这种类型推断了有关字段的类型。
以 ControlTextInput 为例

import React from 'react';
import { Controller, FieldError, FieldValues, UseControllerProps } from 'react-hook-form';

interface Props<T> extends UseControllerProps<T> {
  error: FieldError | undefined;
}

const ControlTextInput = <T extends FieldValues>({ name, control, error }: Props<T>) => {
  return (
    <Controller
      name={name}
      control={control}
      rules={{
        required: 'This is required',
      }}
      render={({ field: { onChange } }) => (
        <>
          <input
            onChange={(text) => {
              onChange(text);
            }}
          />
          {error && <span style={{ color: 'red' }}>{error?.message}</span>}
        </>
      )}
    />
  );
};

export default ControlTextInput;

作为使用 ControlTextInput 的示例组件

import React, { FunctionComponent } from 'react';
import { useForm } from 'react-hook-form';
import ControlTextInput from './ControlTextInput';

interface InputTypes {
  email: string;
  password: string;
}

const Foo: FunctionComponent = () => {
  const {
    formState: { errors },
  } = useForm<InputTypes>();
  return <ControlTextInput name='email' error={errors.email} />;
};

export default Foo;

这是带有现成代码的屏幕截图，它们或多或少地模仿了您的方法和解决方案(与上面的 StackOverflow 新代码相同)。
ControlTextInput
Component which uses ControlTextInput