如何在 React 组件上输入 formik 参数

Question

我不知道如何在 formik 组件上输入 props 参数，有人可以帮我吗？

import React from 'react';
import { useField, FormikProps } from 'formik';

interface InputFields {
  id: string;
  name: string;
}

interface InputForm {
  label: string;
  props: FormikProps<InputFields>;
}

const Input = ({ label, ...props }: InputForm): JSX.Element => {
  const [field, meta] = useField(props);
  return (
    <>
      <label htmlFor={props.id || props.name}>{label}</label>
      <input className="text-input" {...field} {...props} />
      {meta.touched && meta.error ? (
        <div className="error">{meta.error}</div>
      ) : null}
    </>
  );
};

export default Input;

在上面的代码中，我在 useField、props.id 和 props.name

中出现错误

Answer 1

这个怎么样

import React from "react";
import { useField, FieldHookConfig } from "formik";

interface OtherProps {
  label: string;
}

const Input = ({ label, ...props }: OtherProps & FieldHookConfig<string>) => {
  const [field, meta] = useField(props);
  return (
    <>
      <label htmlFor={props.id || props.name}>{label}</label>
      <input className="text-input" {...field} />
      {meta.touched && meta.error ? (
        <div className="error">{meta.error}</div>
      ) : null}
    </>
  );
};

export default Input;

useField 接受字段名称字符串或对象作为参数。是这样输入的

export declare function useField<Val = any>(propsOrFieldName: string | FieldHookConfig<Val>): [FieldInputProps<Val>, FieldMetaProps<Val>, FieldHelperProps<Val>];

这里我们使用了FieldHookConfig<string>.

您只需要键入 Input 组件的 props。 TypeScript 可以自己解决剩下的问题。

如何在 React 组件上输入 formik 参数

How to type formik parameters on react component

typescript

reactjs

formik