javascript - React 中的表单行为不符合预期

Question

我在 React 中有一个表单，用于登录我的应用程序。用于登录的代码本身运行良好，但是当您首次加载页面并输入登录信息并单击提交时，会触发登录代码，但页面会重新加载并显示空白表单。再次输入登录凭据时，它的行为符合预期，但它会启动另一个 session 。知道我做错了什么吗？

import React from "react";
import ReactDOM from "react-dom";
import Router from "react-router";
import { Alert, Button, ControlLabel, FieldGroup, FormControl, FormGroup } from "react-bootstrap";

var Parse = require('parse');
var ParseReact = require('parse-react');
var ParseComponent = ParseReact.Component(React);
var mylogin;

export default class Login extends ParseComponent {
  constructor(props) {
    super(props);
    this.login = this.login.bind(this);
    mylogin = this;
  }

  observe(props, state) {
    return {
      user: ParseReact.currentUser
    };
  }

  static contextTypes = {
    router: React.PropTypes.object.isRequired
  }

  static defaultProps = {
    error: null
  }

  state = {
    error: this.props.error,
  }

  login() {
    var self = this;
    var username = ReactDOM.findDOMNode(this.refs.username).value;
    var password = ReactDOM.findDOMNode(this.refs.password).value;
    function error() {
      self.setState({ error: "Incorrect username or password" });
    }
    if (username.length && password.length) {
      Parse.User.logIn(username,password).then(function(success) {
        // Successful Login. Redirect to Dashboard.
        mylogin.context.router.push("/dashboard");
      }, function(err) {
        // Log-in error.
        error();
      });
    } else {
      this.setState({ error: "Please enter all fields" });
    }
  }

  render () {
      return (
          <div class="container" style={marginStyle}>
            <form>
              {
                this.state.error ?
                <Alert bsStyle="danger">
                  {this.state.error}
                </Alert> :
                null
              }
              <FormGroup controlId="username">
                <ControlLabel>Username</ControlLabel>
                <FormControl type="text" ref="username" placeholder="Username" />
              </FormGroup>
              <FormGroup controlId="password">
                <ControlLabel>Password</ControlLabel>
                <FormControl type="password" ref="password" placeholder="Password" />
              </FormGroup>
              <Button onClick={this.login} type="submit">
                Login
              </Button>
            </form>
          </div>
        );
      }
    }

Answer 1

按钮 type="submit"的默认表单行为是实际提交表单。您需要阻止该操作。登录的第一个参数应该是事件，您可以调用 event.preventDefault关于它:

...

login( e ) {
  e.preventDefault();
  var self = this;
  var username = ReactDOM.findDOMNode(this.refs.username).value;
  var password = ReactDOM.findDOMNode(this.refs.password).value;
  function error() {

...

请注意，我不太熟悉类语法(我是 createClass 粉丝)，但这是您所描述内容的解决方案。是否为事件对象e我不确定是否实际上可以立即访问或不能在类语法中访问。

编辑:更好的是，尝试移动 onClick从按钮到 onSubmit 的操作关于<form> 。然后按照我上面的描述阻止默认。

Here's more from the docs .