一、问题
例如 平常绑定事件我们一定会这么写
//创建组件
class Demo extends React.Component{
state = {
name:'张三'
}
//展示左侧输入框的数据
showData(){
alert(this.state.name); //此时的this为undefined
}
render(){
return(
<div>
<button onClick={this.showData}>点我</button>
</div>
)
}
}
//渲染组件到页面
ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))
为什么this没有指向当前类呢,其实很简单 this 本质上就是指向它的调用者 所以自然指向不会是当前类
例如如下案例
//创建一个Person类
class Person {
//构造器方法
constructor(name,age){
this.name = name
this.age = age
}
speak(){
console.log(this);
}
}
const test = new Person('张三',19)
let speak = test.speak
test.speak() //当前实例
speak() //undefined
然而为什么是undefined不是window呢,因为class里面其实自带严格模式,在babel转义中也是严格模式的,如下图 在顶端加上了 "use strict";这样就开启的严格模式,所以就为undefined,好奇的小伙伴也可以试试
function fn(){
"use strict";
console.log(this);
}
fn()
二、解决问题
方法 一,用bind改变this指向
//创建组件
class Demo extends React.Component{
state = {
name:'张三'
}
//展示左侧输入框的数据
showData(){
alert(this.state.name);
}
render(){
return(
<div>
<button onClick={this.showData.bind(this)}>点我</button>
</div>
)
}
}
//渲染组件到页面
ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))
方法二,用es6的减头函数this指向上一层 特性
//创建组件
class Demo extends React.Component{
state = {
name:'张三'
}
//展示左侧输入框的数据
showData = ()=>{
alert(this.state.name);
}
render(){
return(
<div>
<button onClick={this.showData}>点我</button>
</div>
)
}
}
//渲染组件到页面
ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))
额外在说说函数传参把,这里不能像vue一样,直接 onClick={this.showData('张三')} ,这样的它绑定的是showData的返回值,从而不能这么写
解决办法
onClick={()=>this.showData('张三')} //方法一
onClick={this.showData.bind(this,'张三')} //方法二