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 React way as React does not like such kind of direct DOM manipulation - I think . 1) Am I right ? 2) How to show the message on (not after ) form submission?

var FormComp = React.createClass({

    handleSubmit:function(){

    var userName=this.refs.userName.getDOMNode().value.trim();
    var userEmail= this.refs.userEmail.getDOMNode().value.trim();

    if(!userName || !userEmail){

    return;

    }


    this.props.onFormSubmit({userName:userName, userEmail:userEmail,url:"/api/submit"});

    this.refs.userName.getDOMNode().value='';
    this.refs.userEmail.getDOMNode().value='';

    return;

    },

    render: function() {
    var result=this.props.data;

       return (
        <div className={result}>{result.message}</div>

         <form className="formElem" onSubmit={this.handleSubmit}>
            Name: <input type="text" className="userName" name="userName" ref="userName" /><br/>
            Email: <input type="text" className="userEmail" name="userEmail" ref="userEmail" /><br/>
            <input type="submit" value="Submit" />

         <form >

        </div>


        );
      }
    });


    var RC= React.createClass({

    getInitialState: function() {

     return {data: ""};
      },

    onFormSubmit:function(data){

       $.ajax({
          url: this.props.url,
          dataType: 'json',
          type: 'POST',
          data: data,
          success: function(data) {

            this.setState({data: data});

          }.bind(this),
          error: function(xhr, status, err) {

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

          }.bind(this)
        });


    },
    render:function(){

    return <FormComp onFormSubmit={this.onFormSubmit} data={this.state.data}/>
    }
    });

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

Benjamin Hoffman · Accepted Answer · 2016-04-26 06:51:49Z

12

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

edited Apr 26, 2016 at 6:51

Benjamin Hoffman

7971 gold badge6 silver badges18 bronze badges

answered Jan 14, 2015 at 3:47

Shawn

9396 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Istiaque Ahmed Over a year ago

can you have a look at another React question here - stackoverflow.com/questions/27913004/… ?

Istiaque Ahmed Over a year ago

shouldn't the userName and userEmail inside handleSubmit should be calculated from refs instead of state ?

Shawn Over a year ago

Oops, sorry. Forgot to handle the input changes, so the state is always up to date. I find it's better to intentionally store that state, instead of storing in dom elements. Gives you more options if you decide to change how things work.

Shawn Over a year ago

I did. It's all there.

Hylle Over a year ago

There's no reason to mixin jQuery into React to make a simple Ajax request. It's actually not recommended - stackoverflow.com/questions/51304288/… Use the axios npm module or fetch API instead

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related