Reactjs 如果出现错误，则在输入旁边对Js append div作出反应

我刚开始使用reactJs，我发现它非常混乱

我用post登录，如果用户输入密码，它将返回代码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));
}

---

只需在状态中保留一个标志，并在出现错误时将其打开即可

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

}

您可以使用this.setState进行此操作。因此，当它出错时，将变量设置为true/false

e、 g.在这一行之后：

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

加

然后在渲染方法中，使用简单的if语句

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}
   // ....
   );
}

---

只是一个问题，所以我必须再次渲染整个孩子，但带有errorMessage？如果我能正确理解这一点？对reactjs来说还是新的，所以我仍然对它感到困惑虚拟的DOM会有所不同，而实际的DOM只会被修改，所以这就是重点，谢谢。这是可行的，我需要朝着正确的方向努力。你可以通过像so@AlexanderT这样的州来解决这个问题。我同意jzm的回答。但是谢谢你拉小提琴。

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}
   // ....
   );
}