如何使用useFormik在输入时禁用表单提交？

Posted 2023-02-18

【中文标题】如何使用useFormik在输入时禁用表单提交？

【英文标题】：How to disable form submit on enter with useFormik?

【发布时间】：2022-01-11 22:17:59

【问题描述】：

我正在使用 React、Typescript 和 Formik 构建一个表单。该表单具有三个输入。当用户在输入字段中按下回车键时，我想阻止表单提交。

我的第一种方法是使用event.preventDefault() 语句，但这不起作用。然后我找到了this solution here on ***，但在这个解决方案中使用的是Formik component，而不是useFormik hook。

所以我想知道如何使用 useFormik 在输入时禁用表单提交？

【参考方案1】：

useFormik 钩子提供了一个处理该问题的 handleSubmit 方法，将其传递给您的表单 onSubmit 属性。

...
const fomrik = useFormik(...);

return (
  <form onSubmit=formik.handleSubmit>
...