React的事件处理

最新推荐文章于 2024-06-12 15:38:17 发布

Han_Zhou_Z

最新推荐文章于 2024-06-12 15:38:17 发布

阅读量1.4k

点赞数 3

文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/han_zhou_z/article/details/123338807

版权

本文详细介绍了React事件处理与DOM事件处理的区别，包括事件命名、事件处理函数的定义方式、阻止默认事件、参数传递、事件流及事件对象的使用。重点讨论了React中事件绑定的不同方法及其优缺点，以及如何在事件处理中传递参数和访问data属性。

摘要由CSDN通过智能技术生成

一、React的事件处理

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

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

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

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

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

（1）使用ES6的箭头数

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

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

4、事件流

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

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

5、事件对象

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

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

一、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

最低0.47元/天解锁文章

Han_Zhou_Z

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
React的事件处理

一、React的事件处理1、与DOM事件处理的不同之处（1）React事件的命名方式：小驼峰方式，DOM的命名方式是小写例如：DOM的命名：onclickReact的命名：onClick（2）事件处理函数是以对象的方式赋值,而不是以字符串的方式赋值...
复制链接

扫一扫