Question

当我输入内容并按Enter键后，表单将提交并重新加载页面。如何防止提交表单？

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>
    );
  }
}

示例https://codepen.io/geeny273/pen/OJVpQmd

Answer 1

如果您不想使用jQuery，请尝试这样做

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>
    );
  }
}

Answer 2

在<form>元素上定义onSubmit()处理程序。

如何禁用按“ Enter”键提交表单？ Reactjs

2 个答案: