React 中的表单没有按预期运行答案

【问题标题】：Form in React doesn't behave as expectedReact 中的表单没有按预期运行
【发布时间】：2017-02-21 19:07:30
【问题描述】：

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

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

【问题讨论】：

标签： javascript reactjs ecmascript-6 react-router parse-react

【解决方案1】：

按钮 type="submit" 的默认表单行为是实际提交表单。您需要阻止该操作。 login 的第一个参数应该是事件，你可以在它上面调用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 操作从按钮移动到<form> 上的onSubmit。然后按照我上面的描述进行 preventDefault。

Here's more from the docs.

【讨论】：