react.js - フォーム提出の前後にメッセージを表示

Question

フォームを送信する際に、「しばらくお待ちください」を表示し、サーバーから返されたデータを正常に提出したいとします。 jQueryを使用すると、簡単に実行できます。しかし、Reactはそのような種類の直接的なDOM操作が気に入らないので、リアクション方法が必要です。 1）私は正しいですか？ 2）フォーム提出時にメッセージを表示するにはどうすればいいですか？

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

これは明らかにReactが処理できるものであり、直接のDOM操作は必要ありません。あなたはほとんどそこにいる、ちょっと再編成する必要がある。ここで（重要な変更の周りにコメントして）これにアプローチする一つの方法です：

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