我有一个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;
我知道实际的爱可信功能应该做过的工作,但我的问题是不同的:我似乎无法获得用户名,密码和令牌信息给父母。该函数在上面显示的地方未定义,并且无法从子项访问处理函数,因此失败。我在这里做错了什么?
什么是不确定的? 'LoginForm'或'loginHandler'函数中的'data'? –
无法读取未定义的属性'道具'。这个this.props在LoginForm中是未定义的 – JasonGenX
在''email“:”[email protected]“,// this.state.username'中,'this'是指你的'LoginForm'没有定义状态。 – wesley6j