阵营:不能从孩子得到国家于母公司
我有一个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;
我知道实际的爱可信功能应该做过的工作,但我的问题是不同的:我似乎无法获得用户名,密码和令牌信息给父母。该函数在上面显示的地方未定义,并且无法从子项访问处理函数,因此失败。我在这里做错了什么?
,那么你需要在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);
});
}
而且这也照顾了绑定...是的。那工作。谢谢 – JasonGenX
如果使用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);
});
Chase DeAnda的答案也是有效的imho –
是as =>会照顾的同伴。谢谢。 – JasonGenX
props
是undefined
因为当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)
})
什么是不确定的? 'LoginForm'或'loginHandler'函数中的'data'? –
无法读取未定义的属性'道具'。这个this.props在LoginForm中是未定义的 – JasonGenX
在''email“:”[email protected]“,// this.state.username'中,'this'是指你的'LoginForm'没有定义状态。 – wesley6j