how to disable submitting form on press key 'Enter'? Reactjs

Question

When I enter something and press key 'Enter' then form submits and page reloads. How to prevent submitting form?

class Application extends React.Component {
  render() {
    return (
      <div>
        <form>
          <label for="fname">First name:</label>
          <input type="text" id="fname" name="fname" />
          <label for="lname">Last name:</label>
          <input type="text" id="lname" name="lname" />
          <button type="submit">ok</button>
        </form>
      </div>
    );
  }
}

example https://codepen.io/geeny273/pen/OJVpQmd

Does this answer your question? [React - Preventing Form Submission](https://stackoverflow.com/questions/39809943/react-preventing-form-submission) — Gary Thomas, Feb 26 '20 at 14:31
This solution should help you. It worked for me. https://stackoverflow.com/a/11235672/9823148 — Akinbode A., Feb 26 '20 at 14:38

Vuk Stanković · Answer 1 · 2020-02-26T14:46:26.340

If you don't want to use jQuery try doing this

class Application extends React.Component {
  handleKeyDown(event) {
      if (event.keyCode === 13) {
          event.preventDefault();
      }
  }  

  render() {
    return (
      <div>
        <form onKeyDown={this.handleKeyDown}>
          <label for="fname">First name:</label>
          <input type="text" id="fname" name="fname" />
          <label for="lname">Last name:</label>
          <input type="text" id="lname" name="lname" />
          <button type="submit">ok</button>
        </form>
      </div>
    );
  }
}

score 0 · Answer 2 · answered Feb 26 '20 at 14:35

0

Define an onSubmit() handler on the <form> element.

answered Feb 26 '20 at 14:35

Ryuno-Ki

692
1
6
8

how to disable submitting form on press key 'Enter'? Reactjs

2 Answers2