React学习三（React的事件处理）

VIP文章二十一块石头

已于 2022-03-15 10:59:38 修改

阅读量1.7k

点赞数

分类专栏： React 文章标签： react.js 学习 javascript

于 2022-03-14 21:15:56 首次发布

本文链接：https://blog.csdn.net/qq_44872688/article/details/123479452

版权

文章目录

一、React事件处理
二、React中的事件处理函数
三、事件处理中传参
- 1、直接传递参数
- 2、使用data属性
四、事件流
五、事件委托
六、事件对象

一、React事件处理

React元素的事件处理和DOM元素的很相似，但是有一点语法上的不同：
①在React中事件的命名采用驼峰命名法，而不是原生dom中的小写，如：onclick要写成onClick，onchange要写成onChange。
②响应事件的函数要以对象的形式赋值，而不是以dom字符串的形式。

//DOM方式
<button onclick="clickMe()">请点击</button>
//React方式
<button onClick={
   clickButton}>请点击</button>
//clickButton是一个函数

**注：**React中的事件是合成事件，并不是dom的原生事件，在dom中可以通过返回false来阻止事件的默认行为，但在react中必须显式的调用事件对象e.preventDefault来阻止事件的默认行为，除了这些点外和原生dom事件并无区别。

二、React中的事件处理函数

在React中事件处理函数主要有三种写法，不同的写法解决this指向问题的方式也不同，性能也有差异。

1、使用ES6的箭头函数

（1）在render中使用箭头函数

<!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>Document</title>
    <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')
        //创建一个类组件
        class MyComponent extends React.Component{
   
            constructor(props){
   
                super(props);
                this.state = {
   
                    msg:'西安邮电大学'
                }
            }
            render(){
   
                return (
                    <div>
                        <button onClick={
   ()=>{
   console.log(this.state.msg);}}>点击</button>    
                    </div>
                )
            }
        }
        //进行渲染
        ReactDOM.render(<MyComponent/>,root);
    </script>
</body>
</html>

在这里插入图片描述
此时this指向的是当前组件的实例，此方法的优点是不用在构造函数中绑定this，不足是当组件的逻辑比较复杂时，把组件的逻辑写在{}内会导致render函数变得臃肿，不能比较直观的看出ui的结果，代码的可读性也不是很好。

（2）使用class fields语法

将箭头函数赋给类的属性，优点：不用在构造函数中绑定this，在render函数中调用简单。

...
<body>
    <div id="root"></div>
    <script type="text/babel">
        let root = document.getElementById('root')
        //创建一个类组件
        class MyComponent extends React.Component{
   
            constructor(props){
   
                super(props);
                this.state = {
   
                    msg:'西安邮电大学'
                }
            }
            handClick = ()=> {
   
                console.log(this.state.msg);
            }
            render(){
   
                return (
                    <div>
                        <button onClick={
    this.handClick }>点击</button>    
                    </div>
                )
            }
        }
        //进行渲染
        ReactDOM.render(<MyComponent/>,root);
    </script>
</body>
...

在这里插入图片描述

2、在constructor函数中bind

将事件处理函数作为类的成员函数。

...
<body>
    <div id="root"></div>
    <script type="text/babel">
        let root = document.getElementById('root')
        //创建一个类组件
        class MyComponent extends React.Component{
   
            constructor(props){
   
                super(props);
                this.state = {
   
                    msg:'西安邮电大学',
                    number:0
                }
                this.add = this.add.bind(this)
            }
            add(){
   
                let num = this.state.number;
                num++;
                this.setState({
   
                    number:num
                })
                console.log(this.state.number);
            }
            render(){
   
                return (
                    <div>
                        <button onClick={
    this.add }>Number++</button>    
                    </div>
                )
            }
        }
        //进行渲染
        ReactDOM.render(<MyComponent/>,root);
    </script>
</body>
...

在这里插入图片描述
注意：
①在定义事件处理函数时,是无法识别this(即this是undefined的),必须在构造函数中绑定this
②这种方法的好处是每次渲染都不会重新创建一个回调函数，没有额外的性能损失，但是如果在一个组件中有很多的事件函数时，这种在构造函数中绑定this的方法会显得繁琐。

3、在render函数中使用bind

...
<body

最低0.47元/天解锁文章

二十一块石头

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
React学习三（React的事件处理）

文章目录一、React事件处理二、React中的事件处理函数1、使用ES6的箭头函数（1）在render中使用箭头函数（2）使用class fields语法2、在constructor函数中bind3、在render函数中使用bind4、注意三、事件处理中传参1、直接传递参数2、使用data属性一、React事件处理      React元素的事件处理和DOM元素的很相似，但是有一点语法上的不同：①在React中事件的命名采用驼峰命名法，而
复制链接

扫一扫