Question

您好我正在使用react中的登录表单，我遇到了阻止表单默认行为的问题。我的代码：

 _onSubmit: function(e) {
    alert("llego1!");
    e.preventDefault();
    alert("llego2!");
    this.setState({ errors: [] });
    var email = this.state.emailValue.trim();
    var password = this.state.passValue.trim();
    if ( !email || !password) {
      return;
    }
    console.log("onSubmit");
    SessionActionCreators.login(email, password);
  },

render: function() {
    return (
      <div>
        <form onSubmit={this._onSubmit} style={formStyle}>
          <Input type="text" placeholder="Email" value={this.state.emailValue} onChange={this._EmailChange}/>
          <Input type="password" placeholder="Password" value={this.state.passValue} onChange={this._PassChange}/>
          <ButtonInput type="submit" value="Login" />
        </form>
      </div>
    );
  }

第一个和第二个警报不会被触发，这意味着该函数可能没有被正确调用，但我在文档中读到了onSubmit支持，我也在我的表单上使用react-bootstrap。表单的默认行为（对服务器的get请求）仍在执行，任何帮助都会很棒。

编辑：我正在使用React.createClass

Edit2：尝试使用<button type="submit">Login</button>，仍然是默认行为。

Answer 1

要回答我自己的问题，代码工作正常我有一个配置问题，在修复工作目录中的另一个文件后得到修复。

preventDefault会对提交表单做出反应

1 个答案: