如何实现Formik

Question

下面的组件是用Formik创建的

​

 const MyTextField = ({ label, ...props }) => {
   const [field, meta, helpers] = useField(props);
   return (
     <>
       <label>
         {label}
         <input {...field} {...props} />
       </label>
       {meta.touched && meta.error ? (
         <div className="error">{meta.error}</div>
       ) : null}
     </>
   );
 };

​

现在我想在另一个组件中使用这个MyTextField

​

import { Formik } from 'formik';

export const Search = () => {
    return (
        <Formik>

        </Formik>
    )
}

​

我应该把什么放进Formik组件？我不想有‘提交行动’，我只是想有onChange的行为

编辑

我做了这样的事，我犯了错误

​

export const Search = () => {
    const onChange = (event: any) => {
        console.log(event.target.value)
    }
    return (
        <Formik>
            <FormTextField name="firstName" type="text" onChange={onChange} />
        </Formik >
    )
}

​

TS2739: Type '{ children: Element; }' is missing the following properties from type 'FormikConfig<FormikValues>': initialValues, onSubmit

编辑2

我把MyTxtField换成了这样的东西

​

import { Input } from 'antd';
import { useField, FieldHookConfig } from 'formik';

export const TextInput = ({ ...props }: FieldHookConfig<string>) => {
  const [field] = useField(props);
  return <Input {...field} {...props}/>;
};

​

现在，输入出现错误：

(alias) class Input
import Input
Type '{ className: string | undefined; ref?: LegacyRef<HTMLInputElement> | undefined; key?: Key | null | undefined; accept?: string | undefined; ... 288 more ...; innerRef?: ((instance: any) => void) | undefined; } | { ...; } | { ...; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Input> & Pick<Readonly<InputProps>, "color" | ... 290 more ... | "bordered"> & InexactPartial<...> & InexactPartial<...>'.
  Type '{ className: string | undefined; ref?: LegacyRef<HTMLInputElement> | undefined; key?: Key | null | undefined; accept?: string | undefined; alt?: string | undefined; ... 287 more ...; innerRef?: ((instance: any) => void) | undefined; }' is not assignable to type 'IntrinsicClassAttributes<Input>'.
    Types of property 'ref' are incompatible.
      Type 'LegacyRef<HTMLInputElement> | undefined' is not assignable to type 'LegacyRef<Input> | undefined'.
        Type '(instance: HTMLInputElement | null) => void' is not assignable to type 'LegacyRef<Input> | undefined'.
          Type '(instance: HTMLInputElement | null) => void' is not assignable to type '(instance: Input | null) => void'.
            Types of parameters 'instance' and 'instance' are incompatible.
              Type 'Input | null' is not assignable to type 'HTMLInputElement | null'.
                Type 'Input' is missing the following properties from type 'HTMLInputElement': accept, align, alt, autocomplete, and 329 more.ts(2322)

Answer 1

您必须导入MyTextField组件，然后使用参数呈现它。

<MyTextField name="firstName" type="text" label="First Name" />

如果要编辑默认输入行为，只需将onChange函数传递给组件：

<MyTextField name="firstName" type="text" label="First Name" onChange={onChange} />