2017-06-19 162 views
0

我有一个Login组件:阵营:不能从孩子得到国家于母公司

var React = require('react'); 
var LoginForm = require('./LoginForm'); 


    class Login extends React.Component { 

     constructor (props) { 
      super(props) 

      // Bind the this context to the handler function 
      this.handler = this.handler.bind(this); 

      // Set some state 
      this.state = { 
       username: '', 
       password: '', 
       token: '' 
      }; 
     } 

     handler(data) { 
      this.setState(data); 
     } 

     render() { 
      return (
       <div className="login-container"> 
        <div className="outer"> 
         <div className="middle"> 
          <div className="inner"> 
           <LoginForm loginHandler={this.handler}/> 
          </div> 
         </div> 
        </div> 
       </div> 
      ) 
     } 
    } 

    module.exports = Login; 

LoginForm之一:

var React = require('react'); 
import axios from 'axios'; 

class LoginForm extends React.Component { 

    handleLoginClick(event) { 
     event.preventDefault(); 

     var apiBaseUrl = "http://localhost:8000/api-token-auth/"; 
     var payload={ 
      "email": "[email protected]", 
      "password": "thePassword" 
     }; 
     axios.post(apiBaseUrl, payload) 
      .then(function (response) { 
       console.log(response); 

       var data = { 
        username: '[email protected]', 
        password: 'thePassword', 
       } 

       this.props.loginHandler(data) . // <-- FAILS HERE. this is undefined 

      }) 
      .catch(function (error) { 
       alert('NO'); 
       console.log(error); 
      }); 
    } 

    render() { 
     return (
      <form> 
       <input type="text" className="form-control" name="username" placeholder="Email Address" required="" /> 
       <input type="password" className="form-control" name="password" placeholder="Password" required=""/> 
       <p></p> 
       <button onClick={(event) => this.handleLoginClick(event)} className="btn btn-lg btn-primary btn-block">Login</button> 
      </form> 
     ) 
    } 
} 

module.exports = LoginForm; 

我知道实际的爱可信功能应该做过的工作,但我的问题是不同的:我似乎无法获得用户名,密码和令牌信息给父母。该函数在上面显示的地方未定义,并且无法从子项访问处理函数,因此失败。我在这里做错了什么?

+0

什么是不确定的? 'LoginForm'或'loginHandler'函数中的'data'? –

+0

无法读取未定义的属性'道具'。这个this.props在LoginForm中是未定义的 – JasonGenX

+0

在''email“:”[email protected]“,// this.state.username'中,'this'是指你的'LoginForm'没有定义状态。 – wesley6j

回答

1

,那么你需要在handleLoginClick功能使用脂肪箭头功能在您的.then

axios.post(apiBaseUrl, payload) 
.then(response => { 
    var data = { 
     username: '[email protected]', 
     password: 'thePassword', 
    }; 
    this.props.loginHandler(data); 
}) 
.catch(error => { 
    alert('NO'); 
    console.log(error); 
}); 

或者,您可以在已绑定到this组件函数传递:

handleClickResponse(response) { 
    var data = { 
     username: '[email protected]', 
     password: 'thePassword', 
    }; 
    this.props.loginHandler(data); 
} 
handleLoginClick(){ 
    ... 
    axios.post(apiBaseUrl, payload) 
    .then(response => this.handleClickResponse(response)) 
    .catch(error => { 
     alert('NO'); 
     console.log(error); 
    }); 
} 
+0

而且这也照顾了绑定...是的。那工作。谢谢 – JasonGenX

1

如果使用ES6必须绑定您的匿名诺言功能

axios.post(apiBaseUrl, payload) 
     .then(function (response) { 
      console.log(response); 

      var data = { 
       username: '[email protected]', 
       password: 'thePassword', 
      } 

      this.props.loginHandler(data) . // <-- FAILS HERE. this is undefined 

     }.bind(this)) // <<<<<<<<<<<<<<<<<<< HERE 
     .catch(function (error) { 
      alert('NO'); 
      console.log(error); 
     }); 
+0

Chase DeAnda的答案也是有效的imho –

+0

是as =>会照顾的同伴。谢谢。 – JasonGenX

1

propsundefined因为当this在Axios公司.then呼叫的关联未引用您this期望。

里面handleLoginClick做到这一点,所以你仍然可以访问this

handleLoginClick(event) { 
    var here = this 

    //... then inside the `then` 

    axios.post(apiBaseUrl, payload) 
     .then(function (response) { 
      //... 
      here.props.loginHandler(data) 
     }) 

或者使用脂肪箭头功能,像这样:

.then(response => { 
    this.props.loginHandler(data) 
})