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

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

什么是变量（函数，int，字符串，null，数字等）
如果它是一个函数，则传入什么参数，返回什么，以及如何使用返回。

在您的示例中，submitForm的使用方式：

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

是功能吗？：是

类型：() => unknown

内容：formFields

类型：(formFields) => unknown

返回的内容：Promise

类型：(formFields) => Promise<unknown>

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

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

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

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

1 个答案: