如何使用 formik 和 typescript、钩子构建自定义 onSubmit 函数答案

【问题标题】：how to build custom onSubmit function with formik and typescript, hooks如何使用 formik 和 typescript、钩子构建自定义 onSubmit 函数
【发布时间】：2020-07-01 23:39:10
【问题描述】：

我正在使用 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 应该是什么样子？

【问题讨论】：

没有任何东西被传递到useContactForm() submitForm 定义在哪里？
@jmunsch 我编辑了
const customSubmit = .... /some submit function 你能说明如何定义 submitForm 函数吗？

标签： reactjs typescript typescript-typings formik

【解决方案1】：

如何确定在这种情况下应该是什么类型。

什么是变量（函数、整数、字符串、null、数字等）
如果是函数，输入哪些参数，返回什么，以及如何使用返回。

从你的例子来看， submitForm 是如何使用的：

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

是函数吗？：是的

到目前为止输入：() => unknown

内容：formFields

到目前为止输入：(formFields) => unknown

返回的内容：A Promise

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

到目前为止我们所拥有的：

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

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

【讨论】：