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

Question

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

我的第一个方法是使用

event.preventDefault()

语句，但这不起作用。然后我在 stackoverflow 上找到了这个解决方案，但是在这个解决方案中使用了

Formik

组件，而不是 useFormik 钩子。

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

Answer 1

useFormik

钩子提供了

handleSubmit

处理该问题的方法，将其传递给您的表单

onSubmit

属性。

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

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

Answer 2

<button type='button'>Submit</button>

类型='按钮'

通过使用此功能，按 Enter 键不会触发表单 onSubmit 。

Answer 3

我们可以把它写在表格上

<Form onKeyDown={(e) => {
    if (e.key === 'Enter') {
      e.preventDefault();
    }
  }}
>