javascript - 使用 event.preventDefault() 的 Reactjs 默认表单验证

Question

我不想提交表单点击提交。所以我正在使用:

onSubmit (e) {
    e.preventDefault();
    console.log(this.state);
  }

<form className="loginform">
              <h1 className="logo"><img src={images.Logo} /></h1>
              <input
                className="login"
                placeholder="Username"
                type="text"
                required="true"
                onBlur={(e) => { this.userName(e); }}
              />
              <input className="login" placeholder="Password" type="password" required="true" />
              <input
                className="submit"
                onClick={(e) => { this.onSubmit(e); }}
                type="submit"
                value="Submit"
              />
            </form>

这样做表单验证是行不通的。我想使用带有 preventDefault 的默认表单验证。

Answer 1

你应该使用 onsubmit 表单事件:

<form className="loginform" onSubmit={this.onSubmit.bind(this)}>
  <h1 className="logo"><img src={images.Logo} /></h1>
  <input
    className="login"
    placeholder="Username"
    type="text"
    required="true"
    onBlur={(e) => { this.userName(e); }}
  />
  <input className="login" placeholder="Password" type="password" required="true" />
  <input
    className="submit"
    type="submit"
    value="Submit"
  />
</form>

一般来说，您应该避免通过按钮的 onclick 事件处理表单提交，onsubmit 的额外好处是它也会在 ENTER 键提交时触发。