目录

为什么要做事件绑定

获取事件对象

事件处理-this指向问题

事件处理-this指向解决方案

---

为什么要做事件绑定

让页面有交互； 修改数据以更新视图

格式

<元素 事件名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 (<divonClick={() => console.log('click事件')}onMouseEnter={this.fn}能处理鼠标进入或者点击事件</div>)}
}const content = (<div>{title}{<Hello />}</div>
)ReactDOM.render(content, document.getElementById('root'))

注意：

1. 事件名是小驼峰命名格式

2. 在类中补充方法

3. 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是 Appreturn (<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

 总结

1. class的内部，开启了局部严格模式use strict，所以this不会指向window undefined

2. onClick={this.fn}中，this.fn的调用并不是通过类的实例调用的，所以值是undefined

事件处理-this指向解决方案

解决事件处理程序中this指向问题主要有三种方式

1. 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的转义，所以没有任何问题