Form in React doesn't behave as expected

Question

I have a form in React that is used for logging into my application. The code itself for logging in is firing off fine, however when you first load the page and enter login information and click submit, the code to login fires, but the page reloads and shows a blank form. When putting in login credentials again, it behaves as expected, but it starts another session. Any idea on what I'm doing wrong?

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

imjared · Answer 1 · 2016-10-12T21:11:09.157

Default form behavior with button type="submit" is to actually submit the form. You need to prevent that action. The first argument to login should be the event and you can call event.preventDefault on it:

...

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() {

...

Note that I'm not super familiar with the class syntax (I'm a createClass fan) but this is the solution to what you've described. Whether the event object e is actually accessible immediately or not in the class syntax, I'm not sure.

edit: better yet, try moving the onClick action from the button to onSubmit on the <form>. Then preventDefault as I described above.

Here's more from the docs.

Form in React doesn't behave as expected

1 Answers1