React Form Component onSubmit Handler Not Working

Question

I have the following React component:

class Form extends React.Component {
  handleSubmit(e) {
    e.preventDefault();

    let loginInput = ReactDOM.findDOMNode(this.refs.login);

    // change Main component's state
    this.props.addCard(loginInput.value);

    // reset the form
    loginInput.value = '';
  }

  render() {
    return(
      <form onSubmit={this.handleSubmit}>
        <input placeholder="githug login" ref="login" />
        <button>Add Login</button>
      </form>
    );
  }
}

As you can see, I want the handleSubmit function to be called whenever the form is submitted. I have indicated this by adding the function to the onSubmit handler.

The function is being invoked at the correct time. However, the value of this within that function is null. This is surprising to me, as I expected the value of this to be the React Component. The fact that this is null is surprising to me, because I am using a very similar logic / code as suggest by the official React documentation.

I would appreciate the help in figuring out why this is not the React component, as expected, and how to fix the code so that it is.

Answer 1

When you use React with ES2015 classes you should set this to event handlers

class Form extends React.Component {
  constructor(props) {
     super(props);
     this.handleSubmit = this.handleSubmit.bind(this);
  }    

  handleSubmit(e) {
    e.preventDefault();

    let loginInput = this.refs.login;
    this.props.addCard(loginInput.value);
    loginInput.value = '';
  }

  render() {
    return(
      <form onSubmit={ this.handleSubmit }>
        <input placeholder="githug login" ref="login" />
        <button>Add Login</button>
      </form>
    );
  }
}

Example

No Autobinding

Methods follow the same semantics as regular ES6 classes, meaning that they don't automatically bind this to the instance. You'll have to explicitly use .bind(this) or arrow functions =>.

Answer 2

You need to use button or input with type="submit"

<button type="submit">Submit</button>

Or

<input type="submit" value="Submit" />

Answer 3

One obvious piece of information: do not forget to include your button inside the <form>. I got stuck for a while until I figured out I had put my submit button outside my form, like this:

  <form onSubmit={ this.handleSubmit }>
    <input placeholder="githug login" ref="login" />
  </form>            
  <button type="submit">Add Login</button>

hence the onSubmit event was not being called, and would never be.