react 中的 事件绑定-事件对象-事件处理 ===

目录

为什么要做事件绑定

获取事件对象

事件处理-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 (
      <div
        onClick={() => 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是 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

 总结

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