web-dev-qa-db-ja.com

Enterキートリガーの送信を防ぐ方法

FormikアプリでReactを少し形式で使用しています。

メソッドhandleSubmitは、ユーザーがEnterキーを押すとトリガーされます。

そのトリガーを防ぐ方法はありますか？私はFormik Docsで何も見つかりませんでした...

ありがとう。

reactjsformik
4
PeteMeier

このような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>
  );
}
 _

Codesandbox 例はこちら を参照してください。

5
MadScone