从onClick事件不加括号说起
import React from 'react'
import './App.css'
class TestComponent extends React.Component {
clickHandler () {
console.log('111')
console.log('this指向：', this)
}
render () {
return (
<button onClick={this.clickHandler()}>点击我</button>
)
}
}
function App () {
return (
<div>
<TestComponent></TestComponent>
</div>
)
}
export default App
预想的功能是点击按钮后控制台输出111和this指向，但实际是渲染后会立即执行此方法，不用点击按钮，已经输出了对应信息：
这是因为在react的jsx语法中，{}的作用就是执行，在js表达式中加()相当于是调用函数，也就是this.clickHandler被立即执行了。
不加()会怎么样?刷新页面，没有输出信息，点击按钮，输出了信息，看起来好像解决了问题，但此时会发现this指向变了：
解决方法
解决上述this指向问题，有三种解决方法
1. public class fields(最推荐)
文档
用法：使用箭头函数形式的实例方法，clickHandler = () => {}
import React from 'react'
import './App.css'
class TestComponent extends React.Component {
clickHandler = () => {
console.log('111')
console.log('this指向：', this)
}
render () {
return (
<button onClick={this.clickHandler}>点击我</button>
)
}
}
function App () {
return (
<div>
<TestComponent></TestComponent>
</div>
)
}
export default App
2. 箭头函数
箭头函数特点：
- 箭头函数声明赋值给点击事件，但未执行，只有触发点击后才会被执行
- 箭头函数中的this实际是外层函数的this
用法：在事件绑定位置使用箭头函数，onClick={() => this.clickHandler()}
import React from 'react'
import './App.css'
class TestComponent extends React.Component {
clickHandler () {
console.log('111')
console.log('this指向：', this)
}
render () {
return (
<button onClick={() => this.clickHandler()}>点击我</button>
)
}
}
function App () {
return (
<div>
<TestComponent></TestComponent>
</div>
)
}
export default App
3. constructor 中通过bind绑定this
相当于在类组件初始化阶段就将回调函数的this修正为永远指向当前组件实例对象,this.clickHandler = this.clickHandler.bind(this)
import React from 'react'
import './App.css'
class TestComponent extends React.Component {
constructor() {
super()
this.clickHandler = this.clickHandler.bind(this)
}
clickHandler () {
console.log('111')
console.log('this指向：', this)
}
render () {
return (
<button onClick={this.clickHandler}>点击我</button>
)
}
}
function App () {
return (
<div>
<TestComponent></TestComponent>
</div>
)
}
export default App
