react.js - hiển thị thông báo vào và sau khi gửi biểu mẫu

Question

Khi gửi biểu mẫu, tôi muốn hiển thị 'Vui lòng đợi ..' và gửi thành công dữ liệu được trả về từ máy chủ. Sử dụng jQuery, nó rất dễ làm. Nhưng có một cách phản ứng như React không thích loại thao tác DOM trực tiếp như vậy - tôi nghĩ vậy. 1) Tôi có đúng không? 2) Làm cách nào để hiển thị thông báo trên biểu mẫu (không sau) gửi biểu mẫu?

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

Đây chắc chắn là điều mà React có thể xử lý, không cần thao tác DOM trực tiếp. Bạn gần như ở đó, chỉ cần tổ chức lại một chút. Dưới đây là một cách để tiếp cận điều này (với các nhận xét về những thay đổi quan trọng):

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