javascript - react组件里的方法,没法读取组件的state状态?
本文介绍了javascript - react组件里的方法,没法读取组件的state状态?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
自己写了个登陆表单,登录信息存在组件state里,
在提交方法里要读取相应值,代码如下:
class Login extends React.Component {
constructor(props){
super(props);
this.state = {email:"",password:"",};
this.handleChange = this.handleChange.bind(this)
}
handleChange(e) {
this.setState({[e.target.name]: e.target.value})
}
handleSubmit(e) {
e.preventDefault();
let emails = this.state.email;
let passwords = this.state.password;
let loginurl = "/login?username=" + emails + "&password=" + passwords;
AjaxGet('GET', loginurl, (res) => {...})
}
render(){
var email = this.state.email;
var password = this.state.password;
return (
<form onSubmit={this.handleSubmit}>
<input type="email" name="email" value={email} onChange={this.handleChange} />
<input type="password" name="password" value={password} onChange={this.handleChange} />
</form>
) ;
}
}
export { Login as default } ;
报错提示:
Uncaught TypeError: Cannot read property 'state' of null
我怕很奇怪为什么会这么报错?render方法里面是可以调用的啊。
解决方案
在constructor
方法里再 加一行:
this.handleSubmit = this.handleSubmit.bind(this)
不过 你的写法不太推荐。除了通过bind
改变上下文,还有一种方法就是通过匿名函数,可以减少代码量
<form onSubmit={(e)=>this.handleSubmit(e)}> </form>
你可以看一下我的 《深入理解 React 中的上下文 this》 那篇文章
这篇关于javascript - react组件里的方法,没法读取组件的state状态?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文