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

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 键提交时触发。