web-dev-qa-db-fra.com

react.js - afficher un message sur et après la soumission du formulaire

Lors de la soumission du formulaire, je souhaite afficher "Veuillez patienter ..." et en cas de soumission réussie, les données retournées par le serveur. En utilisant jQuery, c'est facile à faire. Mais il devrait y avoir une React façon React n'aime pas ce genre de manipulation directe du DOM - je pense. 1) Am J'ai raison? 2) Comment afficher le message sur (pas après) la soumission du formulaire?

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')
    );
formsform-submitreactjs
14
Istiaque Ahmed

C'est définitivement quelque chose React peut gérer, aucune manipulation directe du DOM n'est nécessaire. Vous y êtes presque, il suffit de réorganiser un peu. Voici une façon d'aborder cela (avec des commentaires sur les changements importants) :

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