详解三种方式在React中解决绑定this的作用域问题并传参
在React中时常会遇到this指向的作用域问题从而导致undefined报错
先来个Demo：
功能很简单点击按钮改变文字
importReactfrom'react';
exportdefaultclassBindWithThisextendsReact.Component{
constructor(props){
super(props);
this.state={
msg:"BindWithThis"
}
}
render(){
return
{this.state.msg}
}
changeMsg1(){
console.log(this)
this.setState({
msg:"Way1"
})
}
}
但会遇到问题：Cannotreadproperty‘setState'ofundefined
这是因为在changeMsg1方法内部的this指向的并不是外面的组件因而根本就不会有setState()方法了自然会报错
为此有三种解决方法
方式一：在事件处理函数中使用.bind()
只要这样即可：
render(){
return
{this.state.msg}
}
bind()的作用是为前面的函数修改函数内部的this的指向从而使得函数内部的this指向bind中的第一个参数
bind()还可以传值：
bind第一个参数后面的所有参数都会作为调用bind前面的函数的参数传递
render(){
return
{this.state.msg}
}
changeMsg1(arg1,arg2){
this.setState({
msg:"Way1"+arg1+arg2
})
}
除了bind()之外还有call()和apply()它们都能改变函数内部的this的指向
不过bind()和call()/apply()的区别是：bind()并不会立即调用而call()/apply()会立即调用
方式二：在构造函数中使用.bind()
当为一个函数调用bind从而改变this的指向之后bind函数的返回值是这个被改变this指向的函数的改变后的引用
bind并不会修改原函数的this的指向而是返回一个修改后的函数的指向因此需要重新接收方可生效
importReactfrom'react';
exportdefaultclassBindWithThisextendsReact.Component{
constructor(props){
super(props);
this.state={
msg:"BindWithThis"
}
//当为一个函数调用bind改变this的指向之后bind函数的返回值是这个被改变this指向的函数的改变后的引用因此需要重新接收
this.changeMsg2=this.changeMsg2.bind(this,"壹","贰")
}
render(){
return
{this.state.msg}
}
changeMsg2(arg1,arg2){
this.setState({
msg:"Way2"+arg1+arg2
})
}
}
方式三：使用箭头函数
利用了箭头函数的特性：箭头函数内部的this永远指向调用者方的this
render(){
return
{this.changeMsg3("壹","贰")}}/>
{this.state.msg}
}
changeMsg3=(arg1,arg2)=>{
this.setState({
msg:"Way3"+arg1+arg2
})
}
当然更推荐使用更加方便的箭头函数
到此这篇关于详解三种方式在React中解决绑定this的作用域问题并传参的文章就介绍到这了,更多相关React绑定this作用域内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。