react.js - form gönderiminde ve sonrasında bir mesaj göster

Question

Formu gönderirken, 'Please wait ..' yazısını ve başarılı bir şekilde sunucudan dönen verileri göstermek istiyorum. JQuery kullanarak, bunu yapmak kolaydır. Ancak React'ın böyle bir doğrudan DOM manipülasyonunu sevmediği gibi bir tepki yolu olmalı - sanırım. 1) Doğru muyum? 2) İleti form gönderiminde (sonra değil) nasıl gösterilir?

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

Bu, React'un işleyebileceği bir şeydir, doğrudan DOM manipülasyonuna gerek yoktur. Neredeyse oradasın, sadece biraz yeniden organize olmalısın. İşte (önemli değişiklikler etrafında yorumlarla) bu yaklaşım tek yolu şudur:

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