react.js - show a message on and after form submission

Question

On submitting the form, I want to show \'Please wait ..\' and on successful submission the data returned from server. Using jQuery , it is easy to do. But there should be a Reac

Answer 1

This is definitely something React can handle, no direct DOM manipulation is needed. You're almost there, just need to reorganize a little. Here's one way to approach this (with comments around important changes):

var FormComp = React.createClass({

  // To get rid of those input refs I'm moving those values
  // and the form message into the state
  getInitialState: function() {
    return {
      name: '',
      email: '',
      message: ''
    };
  },

  handleSubmit: function(e) {

    e.preventDefault();

    var userName = this.state.name.trim();
    var userEmail = this.state.email.trim();

    if(!userName || !userEmail) return;

    this.setState({
      name: '',
      email: '',
      message: 'Please wait...'
    });

    // I'm adding a callback to the form submit handler, so you can
    // keep all the state changes in the component.
    this.props.onFormSubmit({
      userName: userName, 
      userEmail: userEmail, 
      url: "/api/submit"
    }, function(data) {
      this.setState({ message: data });
    });
  },

  changeName: function(e) {
    this.setState({
      name: e.target.value
    });
  },

  changeEmail: function(e) {
    this.setState({
      email: e.target.value
    });
  },

  render: function() {
    // the message and the input values are all component state now
    return (
      <div>
        <div className="result">{ this.state.message }</div>
        <form className="formElem" onSubmit={ this.handleSubmit }>
          Name: <input type="text" className="userName" name="userName" value={ this.state.name } onChange={ this.changeName } /><br />
          Email: <input type="text" className="userEmail" name="userEmail" value={ this.state.email } onChange={ this.changeEmail } /><br />
          <input type="submit" value="Submit" />
        </form>
      </div>
    );
  }
});


var RC = React.createClass({

  onFormSubmit: function(data, callback){

     $.ajax({
        url: this.props.url,
        dataType: 'json',
        type: 'POST',
        data: data,
        success: callback,
        error: function(xhr, status, err) {

          console.error(this.props.url, status, err.toString());

        }.bind(this)
      });
  },

  render: function() {
    return <FormComp onFormSubmit={this.onFormSubmit} />
  }
});

React.render(
  <RC />,
  document.getElementById('content')
);