如何在打字稿中正确使用 Formik 的 useField 钩子

Question

我关注了 documentation 中的所有内容并观看了 Ben Awad on YouTube 的教程。而且，我仍然无法让它工作。

const TextField = (props: FieldHookConfig<{}>) => {
    const [field] = useField(props);
        return (
            <div>
                <input {...field} {...props}/>
            </div>
        );
    };

我使用 FieldHookConfig 作为道具的类型，因为 useField 需要 string 或基于 Field.d.ts 文件的 FieldHookConfig .但是打字稿仍然不高兴。

它就在这一行抱怨 <input {...field} {...props}/>

(property) JSX.IntrinsicElements.input: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>
Type '{ ref?: string | ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined; key?: string | number | undefined; ... 289 more ...; innerRef?: ((instance: any) => void) | undefined; } | { ...; } | { ...; }' is not assignable to type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'.
  Type '{ ref?: string | ((instance: HTMLSelectElement | null) => void) | RefObject<HTMLSelectElement> | null | undefined; key?: string | number | undefined; ... 269 more ...; checked?: boolean | undefined; }' is not assignable to type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'.
    Type '{ ref?: string | ((instance: HTMLSelectElement | null) => void) | RefObject<HTMLSelectElement> | null | undefined; key?: string | number | undefined; ... 269 more ...; checked?: boolean | undefined; }' is not assignable to type 'ClassAttributes<HTMLInputElement>'.
      Types of property 'ref' are incompatible.
        Type 'string | ((instance: HTMLSelectElement | null) => void) | RefObject<HTMLSelectElement> | null | undefined' is not assignable to type 'string | ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined'.
          Type '(instance: HTMLSelectElement | null) => void' is not assignable to type 'string | ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined'.
            Type '(instance: HTMLSelectElement | null) => void' is not assignable to type '(instance: HTMLInputElement | null) => void'.
              Types of parameters 'instance' and 'instance' are incompatible.
                Type 'HTMLInputElement | null' is not assignable to type 'HTMLSelectElement | null'.
                  Type 'HTMLInputElement' is missing the following properties from type 'HTMLSelectElement': length, options, selectedIndex, selectedOptions, and 4 more.ts(2322)

Answer 1

有 2 个问题，首先，由于不兼容的类型（如错误中指定的），您不能在 <input> 元素上传播 props 变量。其次，FieldHookConfig 的通用类型不应该是 {}，而应该是 string

所以要修复它，假设您正在使用 <TextField> 元素，就像这样

<TextField
  name="firstName"
  type="text"
  placeholder="Jane"
/>

然后在你的 TextField 定义中，你将写

const TextField = (props: FieldHookConfig<string>) => {
  const [field] = useField(props);
  return (
    <div>
      {/* no need to pass the name field because Formik will accept
      that prop internally and pass it to the field variable */}
      <input {...field} placeholder={props.placeholder} type={props.type} />
    </div>
    );
};

Answer 2

补充一下，上面引用的 useField() 文档显示 label 包含在 MyTextField 属性中。要拨打此类电话：

<TextField name="firstName" type="text" placeholder="Jane" label="First Name" />

添加以下接口：

interface OtherProps {
  label : string
}

然后把上面函数表达式的第一行改成：

const TextField = (props : OtherProps & FieldHookConfig<string>) => {

然后您可以通过在函数的 return 块中调用 props.label 来引用传递的 label，例如：

<label htmlFor={props.id || props.name}>{props.label}</label>

如何在打字稿中正确使用 Formik 的 useField 钩子

How to properly use useField hook from Formik in typescript

typescript

reactjs

formik