React Jsエラーの場合はdivの後ろにdivを追加します

Question

reactJsの作業を開始したばかりで、非常に混乱しています。

私はポストでログインしていますが、ユーザーがパスワード200を返した場合は、コード200が返されます。しかし、どうすれば私は追加/追加/エラーを入力の隣に表示できますか（Jqueryでは簡単ですが、それを理解しているようだ）。

これまでのところ私は

render: function() { 

     <div> 
      <label for="username">User:</label> 
      <input type="text" ref='username' id='username' type='text'/> 
      <label for="password">Password:</label> 
      <input ref='password' id='password' type='password' errorMessage="Password is required"/> 
      <a onClick={this.submit} className="btn btn-primary">Login</a> 
     </div> 
}, 

submit: function() { 

     var username = ReactDOM.findDOMNode(this.refs.username).value; 
     var password = ReactDOM.findDOMNode(this.refs.password).value; 
     this.serverRequest = $jQuery.post(url, { username: username, password: password }, function (data,success,type) { 

     if(type.status == 200){ 
      console.log('Good'); 
      this.props.func(); //this is from parent which changes state of login to true 
     } 
     else{ 
      console.log('Wrong password/username'); 

     //Show error next/under password input 
     } 
     }.bind(this)); 
} 

Answer 1

を来るときあなたは、このためのthis.setStateを使用することができた状態にフラグを維持し、オンにするしています。したがって、エラーが発生した場合は、変数をtrue/falseに設定します。

console.log('Wrong password/username'); 

は、あなたがそうHTTPSのようなstate` `でこの問題を解決することができ声明

render: function() { 
    var errorMsg; 
    if (this.state.error) 
    errorMsg = <span className="error-msg">Error</span>; 

    return (
    <div> 
     <label for="username">User:</label> 
      <input type="text" ref='username' id='username' type='text'/> 

      <label for="password">Password:</label> 
      <input ref='password' id='password' type='password' errorMessage="Password is required"/> 
      {errorMsg} 
    // .... 
    ); 
} 

Answer 2

だけでエラーが

render: function() { 

     return (<div> 
      <label for="username">User:</label> 
      <input type="text" ref='username' id='username' type='text'/> 

      <label for="password">Password:</label> 
      <input ref='password' id='password' type='password' errorMessage="Password is required"/> 

      {this.state.errors ? <div >Errors </div> : null} 
      <a onClick={this.submit} className="btn btn-primary">Login</a> 

     </div>) 
} 


submit: function() { 

var username = ReactDOM.findDOMNode(this.refs.username).value; 
var password = ReactDOM.findDOMNode(this.refs.password).value; 

this.serverRequest = $jQuery.post(url, { username: username, password: password }, function (data,success,type) { 

    if(type.status == 200){ 
    console.log('Good'); 

     this.props.func(); //this is from parent which changes state of login to true 
    } 
    else{ 
    console.log('Wrong password/username'); 
     this.setState({ 
     errors: true 
     }); 
     //Show error next/under an input 
    } 

}.bind(this)); 

}