目录
为什么要做事件绑定
让页面有交互; 修改数据以更新视图
格式
<元素 事件名1={ 事件处理函数1 } 事件名2={ 事件处理函数2 } ></元素>
注意:React 事件名采用驼峰命名法,比如:onMouseEnter、onFocus、 onClick .....
示例
import React from 'react'
import ReactDOM from 'react-dom'
const title = <h1>react中的事件</h1>
export default class Hello extends React.Component {
fn() {
console.log('mouseEnter事件')
}
render() {
return (
<div
onClick={() => console.log('click事件')}
onMouseEnter={this.fn}
能处理鼠标进入或者点击事件
</div>
)
}
}
const content = (
<div>
{title}
{<Hello />}
</div>
)
ReactDOM.render(content, document.getElementById('root'))
注意:
-
事件名是小驼峰命名格式
-
在类中补充方法
-
this.fn不要加括号:
-
onClick={ this.fn() }
先调用fn(),然后将fn的执行结果当做click事件的处理函数
-
别忘记了写this
获取事件对象
react中,通过事件处理函数的形参来获取。
示例
handleClick(e)=> {
e.preventDefault()
console.log('单击事件触发了', e)
}
render() {
return (<div>
<button onClick={(e)=>{console.log('按钮点击了', e)}}>按钮</button>
<a href="http://itcast.cn/" onClick={this.handleClick}>武汉黑马</a>
</div>)
}
}
事件处理-this指向问题
问题导入
class App extends React.Component {
state = {
msg: 'hello react'
}
handleClick() {
console.log(this) // 这里的this是 undefined
}
render() {
console.log(this) // 这里的this是 App
return (
<div>
<button onClick={this.handleClick}>点我</button>
</div>
)
}
}
分析原因
-
事件处理程序的函数式函数 (普通函数) 调用模式,在严格模式下,this指向
undefined
-
render函数是被组件实例调用的,因此render函数中的this指向当前组件
class Person(name) {
constructor(){
this.name = name
}
say() {
console.log(this)
}
}
let p1 = new Person('小花')
p1.say() //p1
const t = p1.say
t() // undefined
总结
-
class的内部,开启了局部严格模式
use strict
,所以this不会指向windowundefined
-
onClick={this.fn}
中,this.fn的调用并不是通过类的实例调用的,所以值是undefined
事件处理-this指向解决方案
解决事件处理程序中this指向问题主要有三种方式
-
Function.prototype.bind()
class App extends React.Component {
state = {
msg: 'hello react'
}
handleClick() {
console.log(this.state.msg)
}
render() {
return (
<div>
<button onClick={this.handleClick.bind(this)}>点我</button>
</div>
)
}
}
2. 箭头函数
class App extends React.Component {
state = {
msg: 'hello react'
}
handleClick() {
console.log(this.state.msg)
}
render() {
return (
<div>
<button onClick={() => {this.handleClick()}}>点我</button>
</div>
)
}
}
缺点:需要额外包裹一个箭头函数,影响性能, 结构不美观
3. class 的实例方法【推荐】
class App extends React.Component {
state = {
msg: 'hello react'
}
handleClick = () => {
console.log(this.state.msg)
}
render() {
return (
<div>
<button onClick={this.handleClick}>点我</button>
</div>
)
}
}
注意:这个语法是试验性的语法,但是有babel的转义,所以没有任何问题