脚本宝典收集整理的这篇文章主要介绍了

react开发教程(七)React事件系统

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

事件系统

Virtual DOM在内存中是以对象的形式存在的,如果想要在这些对象上添加事件的话,React是基于Virtual DOM实现了一个合成事件层,他完全符合w3c标准,不存在ie的兼容问题。并且拥有和浏览器原生事件一样的接口,支持冒泡,可以使用stopPropagation()和preventDefault()来中断它。好吧不要想太多记住就是和浏览器事件一样,处了调用形式

合成事件的绑定方式

简单的很

//jsx:
<button onClick={this.handleClick}>按钮</button>
//浏览器原生:
<button onclick="handleClick()">按钮</button>

react只是借鉴DOM0级事件的这种写法

绑定方法

在react组件中,每个方法的上下文都会指向该组件的实例,即自动绑定this为当前组件。而且React还会对这种引用进行缓存,以达到CPU和内存的最优化。在使用ES6 class或者纯粹函数时,这种绑定就不复存在了,我们需要手动实现this绑定

bind方法

这个方法可以帮助我们绑定事件处理器内的this,并且可以向事件处理器中传递参数

import React, { Component } form 'react';

class App extends Component {
    handleClick (e, arg) {
        console.log(e, arg)
    }
    render () {
        return (
            <button onClick={this.handleClick.bind(this,'test')}>按钮</button>
        )
    }
}

构造器内声明

在组件的构造器内完成了this的绑定,这种绑定方式的好处在于仅需要进行一次绑定,而不需要每次调用事件监听器时去执行绑定操作。

import React, { Component } form 'react';

class App extends Component {
    constructor () {
        super();
        this.handleClick = this.handleClick.bind(this,arg);
    }
    handleClick (e, arg) {
        console.log(e, arg)
    }
    render () {
        return (
            <button onClick={this.handleClick(this,'test')}>按钮</button>
        )
    }
}

箭头函数

箭头函数不仅是函数的语法糖,它还自动绑定定义此函数作用域的this,因此我们不需要对它使用bind方法。

import React, { Component } form 'react';

class App extends Component {
    constructor () {
        super();
        this.handleClick = (e, arg) => {
          console.log(e, arg)
        }
    }
 
    render () {
        return (
            <button onClick={this.handleClick(this,'test')}>按钮</button>
        )
    }
}

React中使用原生事件

React中提供了很好的合成事件系统,但有时候也需要用到原生事件。在React生命周期中提供了componentDidMount会在组件已经完成安装并且在浏览器中存在真实的DOM后调用,此时我们就可以完成原生事件的绑定。比如:

import React, { Component } form 'react';

class App extends Component {
    constructor () {
        super();
    }
    
    componentDidMount () {
        this.refs.button.addEventListener('click', e => {
            handleClick(e);
        })
    }
    
    handleClick (e) {
        console.log(e)
    }
    
    componentWillUnmount () {
        this.refs.button.removeEventListener('click')
    }
    
    render () {
        return (
            <button ref="button">按钮</button>
        )
    }
}

一定要注意在React中使用原生DOM事件时,一定要在组件卸载时手动移除,否则很可能出现内存泄漏的问题。2而使用合成事件系统时则不需要,因为React内部以及处理了。

事件类型

键盘事件

onKeyDown
onKeyPress
onKeyUp

焦点事件

onFocus
onBlur

表单事件

onChange
onInput
onSubmit

鼠标事件

onClick
onContextMenu
onDoubleClick
onMouseDown
onMouseUp
onMouseOver
onMouseOut
onMouseMove
onMouseEnter
onMouseLeave
onDrag

选择事件

onSelect

触摸事件

onTouchCancel
onTouchEnd
onTouchMove
onTouchStart

UI事件

onScroll

动画事件

onAnimationStart
onAnimationEnd
onAnimationIteration

图像事件

onLoad
onError

媒体事件

onPause
onPlay
onCanPlay
onLoadStart
onProgress

剪贴板事件

onCopy
onCut
onPaste

上一篇:react开发教程(六)React与DOM

总结

以上是脚本宝典为你收集整理的

react开发教程(七)React事件系统

全部内容,希望文章能够帮你解决

react开发教程(七)React事件系统

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过