React的事件处理你了解吗

2024-09-27 19:05:15

一、React的事件处理

1、与DOM事件处理的不同之处

（1）React事件的命名方式：小驼峰方式，DOM的命名方式是小写

例如：DOM的命名：onclick

React的命名：onClick

（2）事件处理函数是以对象的方式赋值,而不是以字符串的方式赋值

例如：DOM以字符串方式：onclick = "handleClick()"

React以对象方式：onClick = { handleClick }

（3）阻止默认事件的方式不同

DOM通过返回false来阻止： <a href="www.baidu.com" οnclick="javascript:return false;">百度</a>

React需要显式调用e.preventDefault来阻止

2、React中事件处理函数的定义

（1）使用ES6的箭头数

①在render函数中使用箭头函数：

Ⅰ、优点：不用在构造函数中绑定this

Ⅱ、缺点：当函数的逻辑比较复杂时,render就显得臃肿,无法直观的看到组件的UI结构,代码可读性差

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件处理函数-->在render中使用箭头函数</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        let root = document.getElementById('root');
        //1.创建一个类组件
        class MyComponent extends React.Component{
            constructor(props){
                super(props)
                this.state={
                    msg: '小森同学'
                }
            }
            render(){
                return (
                    <div>
                        <button onClick= { ()=>{ console.log(this.state.msg)} } >点我</button>
                    </div>
                )
            }
        }
        //2.进行渲染
        ReactDOM.render(<MyComponent/>,root)
    </script>
</body>
</html>

②使用class fields语法：将箭头函数赋给类的属性

Ⅰ、优点：不用在构造函数中绑定this,在render函数中调用简单

<body>
    <div id="root"></div>
    <script type="text/babel">
        let root = document.getElementById('root');
        //1.创建一个类组件
        class MyComponent extends React.Component{
            constructor(props){
                super(props)
                this.state={
                    msg: '小沈同学',
                    number: 0
                }
            }
            handleClick = ()=>{  //将箭头函数赋给类的属性
                console.log(this.state.msg)  //将一个箭头函数赋值为handleClick，handleClick是MyComponent的一个属性
            }
            render(){
                console.log('render')
                return (
                    <div>
                        <button onClick= { this.handleClick } >点我</button>  //调用这个属性
                    </div>
                )
            }
        }
        //2.进行渲染
        ReactDOM.render(<MyComponent/>,root)
    </script>
</body>

（2）在构造函数中进行绑定：将事件处理函数作为类的成员函数

注意：在定义事件处理函数时,是无法识别this(即this是undefined的),必须在构造函数中绑定this

①、优点：在render函数调用时不需要重新创建事件处理函数

②、缺点：当事件处理很多时，构造函数就显的很繁琐

<body>
    <div id="root"></div>
    <script type="text/babel">
        let root = document.getElementById('root');
        //1.创建一个类组件
        class MyComponent extends React.Component{
            constructor(props){
                super(props)
                this.state={
                    msg: '小沈同学',
                    number: 0
                }
                this.add = this.add.bind(this)  //this指针绑定到函数add里面去
            }
            handleClick = ()=>{
                console.log(this.state.msg)
            }
            add(){  //如果上述不绑定this，那么add函数里的this将无法识别
                let num = this.state.number
                num++
                this.setState({
                    number: num
                })
                console.log(this.state.number)
            }
            render(){
                console.log('render')
                return (
                    <div>
                        <button onClick= { this.handleClick } >点我</button>
                        <button onClick= { this.add }>Number++</button>
                    </div>
                )
            }
        }
        //2.进行渲染
        ReactDOM.render(<MyComponent/>,root)
    </script>
</body>

（3）在render函数中绑定this

①、优点：在调用事件处理函数时,传参比较方便

②、缺点：每次调用render函数时都重新绑定,导致性能下降

<body>
    <div id="root"></div>
    <script type="text/babel">
        let root = document.getElementById('root');
        //1.创建一个类组件
        class MyComponent extends React.Component{
            constructor(props){
                super(props)
                this.state={
                    msg: '小沈同学',
                    number: 0
                }
                // this.add = this.add.bind(this)  //this指针绑定到函数add里面去
            }
            handleClick = ()=>{
                console.log(this.state.msg)
            }
            add(){  //如果上述不绑定this，那么add函数里的this将无法识别
                let num = this.state.number
                num++
                this.setState({
                    number: num
                })
                console.log(this.state.number)
            }
            render(){
                console.log('render')
                return (
                    <div>
                        <button onClick= { this.handleClick } >点我</button>
                        <button onClick= { this.add.bind(this) }>Number++</button>
                    </div>
                )
            }
        }
        //2.进行渲染
        ReactDOM.render(<MyComponent/>,root)
    </script>
</body>

（4）React中事件处理函数

几种方式的比较

影响constructor函数中bind使用class fields语法render中使用箭头函数render中使用bindrender时生成新函数否否是是性能无影响无影响有影响有影响可直接携带参数否否是是简洁性不好好好好

（5）注意事项

①React事件的命名采用小驼峰式（camelCase），而不是纯小写。且事件名称之后不能加（），否则会直接执行

②不能通过返回false的方式阻止默认行为，必须显示的使用preventDefault

③必须谨慎对待JXS回调函数中的this，在JavaScript中，class（类）的方法默认不会绑定this。如果忘记绑定this.textChange并把它传入onChange，当调用这个函数的时候，this的值为undefined。如果觉得使用bind麻烦，还可以使用箭头函数。

3、事件处理中的参数传递

（1）直接传递参数

①在构造函数中给事件处理函数绑定this，调用事件处理函数时直接传参

 <div id="root"></div>
    <script type="text/babel">
        let root = document.getElementById('root');
        //1.定义类组件
        class Clock extends React.Component{
            constructor(props){
                super(props)
                this.state= {
                    list:[
                        {
                            id: 111,
                            msg: '小森'
                        },
                        {
                            id: 222,
                            msg: '小沈'
                        },
                        {
                            id: 333,
                            msg: '小顾'
                        }
                    ],
                    msg: '编号：'
                }
                this.handleClick = this.handleClick.bind(this)
            }
            handleClick(id){ //事件处理函数
                alert("编号："+id)
            }
            render(){
                //获取状态属性值
                const { list } = this.state
                return (
                    <div>
                        {
                            list.map((item)=>
                               <button onClick={ ()=>{this.handleClick(item.id)}} key={item.id}>{item.msg}</button>
                            )
                        }
                    </div>
                )
            }
        }
        //2.渲染
        ReactDOM.render(<Clock/>,root)
    </script>

注意：在箭头函数中调用事件处理函数时不需要绑定this

②在render函数中调用事件处理函数时进行this的绑定

<div id="root"></div>
    <script type="text/babel">
        let root = document.getElementById('root');
        //1.定义类组件
        class Clock extends React.Component{
            constructor(props){
                super(props)
                this.state= {
                    list:[
                        {
                            id: 111,
                            msg: '小森'
                        },
                        {
                            id: 222,
                            msg: '小沈'
                        },
                        {
                            id: 333,
                            msg: '小顾'
                        }
                    ],
                    msg: '编号：'
                }
            }
            handleClick(id){ //事件处理函数，e表示触发事件的对象,成员函数
                let str = this.state.msg
                alert(str + id)
            }
            render(){
                //获取状态属性值
                const { list } = this.state
                return (
                    <div>
                        {
                            list.map((item)=>
                                <button onClick={ this.handleClick.bind(this,item.id) } key={item.id}>{ item.msg }</button>
                            )
                        }
                    </div>
                )
            }
        }
        //2.渲染
        ReactDOM.render(<Clock/>,root)
    </script>

（2）在定义UI控件时使用data自定义属性，在事件处理函数中通过'e.target.dataset.属性名'来获取UI控件中的data属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件处理中的参数传递</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        let root = document.getElementById('root');
        //1.定义类组件
        class Clock extends React.Component{
            constructor(props){
                super(props)
                this.state= {
                    list:[
                        {
                            id: 111,
                            msg: '小森'
                        },
                        {
                            id: 222,
                            msg: '小沈'
                        },
                        {
                            id: 333,
                            msg: '小顾'
                        }
                    ],
                    msg: '编号：'
                }
            }
            handleClick(e){ //事件处理函数，e表示触发事件的对象
                let str = this.state.msg
                alert(str + e.target.dataset.count)
                    //事件处理对象event，通过event可以得到target目标对象，就是那个button。dataset，得到自定义属性的集合，在集合里找到count
            }
            render(){
                //获取状态属性值
                const { list } = this.state
                return (
                    <div>
                        {
                            list.map((item)=>
                                  <button
                                     onClick={ this.handleClick.bind(this) }
                                     key={item.id}
                                     data-count = { item.id}  //标签的自定义属性用'data-'开头后跟自定义属性名
                                    >{ item.msg }</button>
                            )
                        }
                    </div>
                )
            }
        }
        //2.渲染
        ReactDOM.render(<Clock/>,root)
    </script>
</body>
</html>

4、事件流

（1）React的事件流默认是冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件流</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        let root = document.getElementById('root')
        //1.定义CSS样式
        const style = {
            child: {
                width: '100px',
                height: '100px',
                backgroundColor: 'red'
            },
            parent: {
                width: '150px',
                height: '150px',
                backgroundColor: 'blue'
            },
            ancestor: {
                width: '200px',
                height: '200px',
                backgroundColor: 'green'
            }
        }
        //2.定义类组件
        class App extends React.Component{
            render(){
                return (
                    <div
                        onClick= { ()=>{ console.log('ancestor')}}
                        style = { style.ancestor }
                    >
                        <div
                           onClick={ ()=>{ console.log('parent')}}
                           style = { style.parent }
                        >
                            <div
                               onClick={ (e)=>{
                                   console.log('child')
                                   e.stopPropagation() //阻止冒泡
                                }}
                               style = {style.child }
                            >
                            </div>
                        </div>
                    </div>
                )
            }
        }
        //3.渲染
        ReactDOM.render(<App/>,root)
    </script>
</body>
</html>
//输出child，parent，ancestor

（2）React中使用捕获方式：事件类型后面加一个后缀Capture

先由document找到最外层绿色的，然后传给蓝色，然后传给红色。所以工具中输出的顺序是（ancestor，parent，child）

5、事件对象

虽然React事件是合成事件,但是在事件处理中可以获取事件对象的

（1）在React事件处理中有一个全局事件对象

event对象，每次事件触发后(事件处理函数调用完成后)，就会清空event对象当下一次事件触发时重新获取该对象。该对象不是原生(DOM)的event对象，但是可以通过该对象获取原生对象的部分属性

<div id="root"></div>
    <script type="text/babel">
        let root = document.getElementById('root')
        //1.定义样式规则
        const style = {
            "mydiv": {
                width: '150px',
                height: '150px',
                backgroundColor: 'red'
            }
        }
        //2.定义类组件
        class App extends React.Component{
            constructor(props){
                super(props)
                this.state = {
                    x: 0,
                    y: 0
                }
            }
            render(){
                return (
                    <div>
                        <div style = { style['mydiv']}  //以数组的方式设置样式
                             onClick= { (event)=> { //'event'对象不是原生的event,但是可以通过event来获取原生的事件对象的部分属性
                                const { clientX,clientY } = event
                                 this.setState({
                                     x: event.clientX,
                                     y: event.clientY
                                 })
                        >
                          X: {this.state.x},Y: { this.state.y }
                        </div>
                    </div>
                )
            }
        }
        //3.渲染
        ReactDOM.render(<App />,root)
    </script>

（2）在异步操作中获取event

问题：当事件触发、响应结束后,event对象会被清空，但是异步数据还没有得到，在得到异步数据之后再去访问 event对象的属性就会报错。

解决办法：先将event对象的某些属性值保存起来，得到异步数据之后再来使用这些属性值

<div id="root"></div>
    <script type="text/babel">
        let root = document.getElementById('root')
        //1.定义样式规则
        const style = {
            "mydiv": {
                width: '150px',
                height: '150px',
                backgroundColor: 'red'
            }
        }
        //2.定义类组件
        class App extends React.Component{
            constructor(props){
                super(props)
                this.state = {
                    x: 0,
                    y: 0
                }
            }
            render(){
                return (
                    <div>
                        <div style = { style['mydiv']}  //以数组的方式设置样式
                             onClick= { (event)=> { //'event'对象不是原生的event,但是可以通过event来获取原生的事件对象的部分属性
                                const { clientX,clientY } = event //定义变量，将event保存起来
                                setTimeout(()=>{  //下次触发时就可以得到保存在变量中的值
                                    this.setState({
                                        x: clientX,
                                        y: clientY
                                    })
                                },1000)
                             }}
                        >
                          X: {this.state.x},Y: { this.state.y }
                        </div>
                    </div>
                )
            }
        }
        //3.渲染
        ReactDOM.render(<App />,root)
    </script>

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

React事件处理的机制及原理

React中的事件处理在React元素中绑定事件有两点需要注意: (1)在React中,事件命名采用驼峰命名方式,而不是DOM元素中的小写字母命名方式.例如onclick要写成onClick,onchange要写成onChange等. (2)处理事件的响应函数要以对象的形式赋值给事件属性,而不是DOM中的字符串形式.例如在DOM中绑定一个点击事件应该写成: <button onclick="clickButton()"> Click </button> 而在R
React学习笔记之事件处理（二）

之前已经给大家介绍了React中的条件渲染(传送门),本文将给大家关于React中事件处理的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: React的事件处理和DOM的事件处理是很相似的,只是有一些语法上的区别: React的事件名是驼峰的,不是小写的在JSX语法中,你传递一个fucntion作为时间处理器,而不是一个string 举个例子: <button onClick={activateLasers}> Activate Lasers </button> 而
在React中如何优雅的处理事件响应详解

前言本文主要给大家介绍的是关于React处理事件响应的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍吧. React中定义一个组件,可以通过React.createClass或者ES6的class.本文讨论的React组件是基于class定义的组件.采用class的方式,代码结构更加清晰,可读性强,而且React官方也推荐使用这种方式定义组件. 处理事件响应是Web应用中非常重要的一部分.React中,处理事件响应的方式有多种. 一.使用箭头函数先上代码: //代码1 class
React的事件处理你了解吗

目录一.React的事件处理 1.与DOM事件处理的不同之处 (1)React事件的命名方式:小驼峰方式,DOM的命名方式是小写 (2)事件处理函数是以对象的方式赋值,而不是以字符串的方式赋值 (3)阻止默认事件的方式不同 2.React中事件处理函数的定义 (1)使用ES6的箭头数 (2)在构造函数中进行绑定:将事件处理函数作为类的成员函数 (3)在render函数中绑定this (4)React中事件处理函数 (5)注意事项 3.事件处理中的参数传递 (1)直接传递参数 (2)在定义UI控
react中事件处理与柯里化的实现

目录 1. 事件处理阻止默认行为合成事件 2. 柯里化柯里化的目的一个简单的例子 1. 事件处理 React 中元素也可接受.处理事件,但是在语法上有一点不同. 在React 中所有事件的命名采用的是小驼峰,而非原生 DOM 的纯小写,所有事件需要我们传入一个函数,而非字符串. 例如: const Button = () => { const handleClick = () => { console.log('click') } return <button onClick={
React中阻止事件冒泡的问题详析

前言最近在研究react.redux等,网上找了很久都没有完整的答案,索性自己整理下,这篇文章就来给大家介绍了关于React阻止事件冒泡的相关内容,下面话不多说了,来一起看看详细的介绍吧在正式开始前,先来看看 JS 中事件的触发与事件处理器的执行. JS 中事件的监听与处理事件捕获与冒泡 DOM 事件会先后经历捕获与冒泡两个阶段.捕获即事件沿着 DOM 树由上往下传递,到达触发事件的元素后,开始由下往上冒泡. IE9 及之前的版本只支持冒泡 | A --------------
React的三大属性你都知道吗

目录 React三大属性 props 函数组件类组件 state 有状态组件和无状态组件 setState props和state属性的区别 refs React.createRef ref的绑定总结 React三大属性 props 组件是封闭的,接收外部数据应该通过props来实现函数组件通过参数props来接收数据,props是一个对象: 类组件通过this.props接收数据. 传递数据:在组件标签上添加属性函数组件 const Hello = (props) => { conso
React事件处理和表单的绑定详解

目录一.事件处理 1.1 React事件 1.2 事件对象 1.3 事件传参 1.4 函数组件事件处理二.表单一.事件处理 1.1 React事件 React 元素的事件处理和 DOM 元素类似.但是有一点语法上的不同: React 事件绑定属性的命名采用驼峰式写法,而不是小写. 例如onclick属性应该写成onClick. 如果采用 JSX的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM 元素的写法).例如已经定义了一个名为handleClick的函数,应该这样调用:
React事件处理过程中传参的实现方法

目录摘要 1.箭头函数 2.函数柯里化 3.bind方法摘要首先我们知道,在React中,是通过小驼峰式给元素绑定事件: fn = ()=>{ //执行代码 } button onClick={this.fn}>111</button> 但是如果有Vue的基础,可以很清楚的看到二者的区别.在Vue中,我们可以直接给fn传递参数. 但是如果在React中我们这么做: fn = (value)=>{ //执行代码 console.log(value) } button on
React.js入门学习第一篇

一.JSX介绍 ①定义 JSX=JavaScript XML,是一种在React组件内部构建标签的类XML语法.React在不使用JSX的情况下一样可以工作,但是使用JSX可以提高组件的可读性,增强JS语义,结构清晰,抽象程度高,代码模块化.因此推荐在React中使用JSX. ②特点 1.元素名首字母大写 2.符合嵌套规则 3.可以写入求值表达式 4.驼峰式命名 5.不能使用javascript原生函数的一些关键词,如for和class.需要替换成htmlFor和className ③使用方法
React服务端渲染（总结）

一.前言为什么需要服务端渲染?什么情况下进行服务端渲染?笔者认为,当我们要求渲染时间尽量快.页面响应速度快时(优点),才会采用服务器渲染,并且应该"按需"对页面进行渲染 --"首次加载/首屏".即服务端渲染的优势在于:由中间层( node端 )为客户端请求初始数据.并由node渲染页面.那客户端渲染和服务端渲染有什么差别?服务端渲染究竟快在哪里呢? 二.原因与思路客户端渲染路线:1. 请求一个html -> 2. 服务端返回一个html -> 3.