如何使用 formik 和打字稿、钩子构建自定义 onSubmit 函数

Question

我正在使用 useCallback 挂钩构建表单 onSubmit 函数，这些挂钩将在 formik

中使用

我使用 formik 的组件可能看起来像这样，

  import { useContactForm } from './useContactForm'
  //some functional component
  const customSubmit = .... /some submit function 
  const { initialValues, handleSubmit } = useContactForm(customSubmit); 
  const formik = useFormik({
    initialValues,
    onSubmit: handleSubmit //something like this
  });

  return(
    <form onSubmit ={formik.handleSubmit}>
      <input
         id="email"
         name="email"
         type="email"
         onChange={formik.handleChange}
         value={formik.values.email}
      />
      <input 
         id="password"
         name="password"
         type="password"
         onChange={formik.handleChange}
         value={formik.values.password}
      />
      <button type="submit">Submit</button>
    </form>
  )

我的 useContactForm.ts 看起来像这样。 // useContactForm.ts

import { useCallback } from 'react';

interface IContactFormFields {
  email: string,
  password: string
}
type ISubmitFormType = (value: IContactFormFields, e?: React.FormEvent<HTMLFormElement>) => Promise<void>;

const useContactForm = (submitForm: ISubmitFormType) => {
  const handleSubmit = useCallback(
    ( formFields : IContactFormFields ) => {
      return submitForm(formFields).then(() => {
        console.log('form submitted');
      })
    },[]);

  const initialValues: IContactFormFields = {
    email: "",
    password: "",
  };
  return {
    handleSubmit,
    initialValues,
  }
}

export default useContactForm;

我的问题 useContactForm 应该将自定义提交函数名称 submitForm 作为参数。

那么，我的ISubmitFormType应该是什么样子呢？

Answer 1

如何确定这种情况下的类型。

什么是变量（函数、整数、字符串、空值、数字等）
如果它是一个函数，输入的参数是什么，returned 是什么，return 是如何使用的。

根据您的示例，如何使用 submitForm：

submitForm(formFields).then(() => {
        console.log('form submitted');
      })

是函数吗：是

目前输入：() => unknown

内容：formFields

目前输入：(formFields) => unknown

什么是 returned: A Promise

目前输入：(formFields) => Promise<unknown>

我们目前拥有的：

type ISubmitFormType = (formFields: unknown) => Promise<unknown>

(submitForm: ISubmitFormType) => {...}

如何使用 formik 和打字稿、钩子构建自定义 onSubmit 函数

how to build custom onSubmit function with formik and typescript, hooks

typescript

reactjs

typescript-typings

formik