react.js - eine Nachricht auf und nach der Formularübergabe anzeigen

Question

Beim Abschicken des Formulars möchte ich 'Please wait ..' anzeigen und bei erfolgreicher Übermittlung die Daten vom Server zurückgeben. Mit jQuery ist es einfach zu tun. Aber es sollte einen React-Weg geben, da React solch eine direkte DOM-Manipulation nicht mag - denke ich. 1) Bin ich richtig? 2) Wie zeigt man die Nachricht auf (nicht nach) Formular Einreichung?

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

Answer 1

Dies ist definitiv etwas, das React verarbeiten kann, es ist keine direkte DOM-Manipulation erforderlich. Du bist fast da, musst nur ein wenig reorganisieren. Hier ist eine Möglichkeit, diesen Ansatz (mit Kommentaren um wichtige Änderungen):

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