Question

首先，我是React的新手，所以如果有什么需要改进的地方告诉我。

我有一个登录表单，用ajax将信息发送到php，我想抓住错误并更新一个p元素，但我找不到办法。

如果错误的是我用php发送的消息，我想调用另一种方法，但是它表示未定义。

   var APP = React.createClass({

    getInitialState:function(){
      return{user:'',pass:'',message:''};
    },
    setUser:function(e){
      this.setState({user:e.target.value});
    },
    setPass:function(e){
      this.setState({pass:e.target.value});
    },
    setErrors:function(errors){
      alert('calling');
      this.setState({message:errors});
    },
    handleForm:function(e){
      e.preventDefault();

      var username = this.state.user;
      var password = this.state.pass;


      $.ajax({
        'url':'prg/loginJSON.php',
        'type':'POST',
         data:{'username':username,'password':password},
         success:function(result){
           if(result.error){
             window.location.href="http://localhost/learnSeries/home.html";
             sessionStorage.setItem('cookiePass',result.token);
           }
           else{
             this.setErrors(result.message);
           }
         },
         error:function(xhr){
           console.log('error ajax' +xhr.responseText);
         }
      });
    },
    render:function(){
    return(
      <form onSubmit={this.handleForm}  id="loginForm" method="post" action="" role="form">
        <label className="is-required">User</label>
        <input type="text"  name="username" onChange={this.setUser} id="username" required placeholder="User"></input>
        <label className="is-required">Password</label>
        <input  type="password"  name="password" onChange={this.setPass} id="password" required placeholder="Password"></input>
        <input  type="submit"  value="Log In"></input>
        <p>{this.state.message}</p>
      </form>
    )
  }
  });
  React.render(<APP />, document.getElementById('site'));

Answer 1

this功能中的success与使用$.ajax启动请求时的this不同。您必须记住它并在以后使用它而不是handleForm:function(e){ // ... // --> var self = this; // <-- $.ajax({ // ... success:function(result){ if(result.error){ // ... } else{ // --> self.setErrors(result.message); // <-- } }, // ... });（在我的

中）

{{1}}

在方法内部调用另一个方法ReactJS

1 个答案: