如何防止Enter鍵觸發提交 [英] How to prevent enter key triggering submit

問題描述

我正在使用Formik用于React應用中的一個小表單。

方法handleSubmit在用戶按Enter鍵時觸發。

有什么方法可以防止這種觸發嗎？ 我在以前的文檔中沒有找到任何東西...

謝謝。

推薦答案

您可以按如下方式添加onKeyDown處理程序：

/**
 * Stop enter submitting the form.
 * @param keyEvent Event triggered when the user presses a key.
 */
function onKeyDown(keyEvent) {
  if ((keyEvent.charCode || keyEvent.keyCode) === 13) {
    keyEvent.preventDefault();
  }
}

/**
 * Sample form component.
 */
function Example() {
  return (
    <Formik initialValues={{ name: "" }} onSubmit={() => console.log("Submit")}>
      <Form onKeyDown={onKeyDown}>
        <div>
          <label htmlFor="name">Name</label>
          <Field id="name" name="name" type="text" />
        </div>
        <button type="submit">Submit</button>
      </Form>
    </Formik>
  );
}

請參閱CodeSandboxexample here。

這篇關于如何防止Enter鍵觸發提交的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持IT屋！