我有一个LoginForm组件。 我想在提交之前检查是否已设置loginName
和password
。 我试过这个代码(省略了很多东西):
class LoginForm extends Component {
constructor() {
super();
this.state = {
error: "",
loginName: "",
password: "",
remember: true
};
}
submit(e) {
e.preventDefault();
if(!this.state.loginName || !this.state.password) { //this is null
this.setState({ error: "Fill in both fields" });
} else {
console.log("submitting form");
}
}
render() {
return (
<div className="col-xs-12 col-sm-6 col-md-4">
<form className="login" onSubmit={this.submit}>
<button type="submit" className="btn btn-default">Sign in</button>
</form>
</div>
);
}
}
export default LoginForm;
但是,我在事件处理程序中得到一个TypeError
,说this
是null。
我该怎么办?
React之前为你绑定了回调。 但现在它已经消失了,你必须自己绑定它或者像包装一样
onSubmit={() => this.submit()}
对于那些使用Babel的人,可以将bind运算符与transform-function-bind插件一起使用:
onSubmit={::this.submit}
这是一个语法糖:
onSubmit={this.submit.bind(this)}
你没有把this
绑定到你的班级; 您可以使用ES6类属性功能以最干净的方式解决问题; 所以你需要做的就是:
submit = (e) => {
// some code here
}
箭头功能会自动绑定它; 比在构造函数中绑定它要好得多; 最重要的是永远不要这样做:
onSubmit={() => this.submit()}
这将创建一个函数,它是javascript中的一个对象,它将占用一些内存,现在位于redner函数中! 这让它变得如此昂贵。 render
函数是运行了很多次的代码的一部分,每次创建submit
函数时,您最终会遇到一些与性能相关的问题。 所以你的代码应该像:
class LoginForm extends Component {
submit = (e) => {
// some code here
}
render() {
return (
<form className="login" onSubmit={ this.submit }>
<button type="submit" className="btn btn-default">Sign in</button>
</form>
);
}
}
export default LoginForm;
在这里,您将不会遇到性能问题,也不会遇到绑定问题,并且您的代码看起来更好。