react事件处理

梨轻巧
102 阅读3分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

一 事件绑定

  • 语法: on事件名称={事件处理程序}

  • 示例: onClick={()=>{}}

  • 备注: 事件名称使用驼峰命名法

类组件和函数组件的事件绑定稍有区别, 下面我们来看一下

关于类组件和函数组件不清楚的可以看这里

1 类组件

//导入react
import React from "react";
import ReactDOM from "react-dom";
 
 
class App extends React.Component {
    //事件处理程序
    fn() {
        alert("你真好看")
    }
    render() {
       //this指向render
        return (<button onClick={this.fn}>点我有惊喜</button>)
    }
}
 


//渲染react
ReactDOM.render(<App/>, document.getElementById("root"));

点击按钮效果

image.png

2 函数组件

//导入react
import React from "react";
import ReactDOM from "react-dom";
 
 
//函数组件
//函数组件没有this
function App() {
 
    //事件处理程序
    function fn() {
        alert("你真好看")
    }
 
    //此处函数前面没有this
    return (<button onClick={fn}>点我有惊喜</button>)
}
 
//渲染react
ReactDOM.render(<App/>, document.getElementById("root"));

3 区别

区别1

类组件: 事件处理程序使用了this关键字,此处的this指的是render

函数组件: 没有this

区别2

类组件: 定义事件处理函数 没有 function关键字(有function会报错)

函数组件: 定义事件处理函数 有 function关键字

二 事件对象

1

问: 事件对象是什么?

答: 事件发生后，跟事件相关的一系列的信息和数据都放到这个对象里面，这个对象就是事件对象event

它有很多属性和方法.比如鼠标在移动的过程中,鼠标的横纵坐标就保存到了事件对象中.

clientX/clientY: 鼠标点击位置相对于浏览器的距离

image.png

2

问: 事件对象从哪里来的?

答: 事件对象不是由我们自己创建的,当有事件发生时,是由所在的系统帮我们产生的

3

问: 如何获取事件对象?

答: 系统产生event之后,会把event作为参数传递给我们的程序

我们可以通过事件处理程序的参数获取到事件对象

参数可以自己定义名称

4

问: 合成事件(对象)是什么?

答: 就是react中的事件对象,对这个名字有印象就可以

5

问: 合成事件(对象)有什么好处?

答: 可以兼容所有浏览器,无需担心跨浏览器兼容性问题


案例

我们现在对事件对象大概有了一个了解,现在有一个需求:

  • 希望点击超链接,实现 点击事件但是不进行链接跳转 的功能

实现代码如下:

//导入react
import React from "react";
import ReactDOM from "react-dom";
  
class App extends React.Component {
    //事件处理程序
    fn(e) {
        //阻止浏览器的默认行为
        e.preventDefault()
        alert("今天天气还晴朗")
        console.log(e);
    }
 
    render() {
        return (<a href="https://www.bilibili.com/" onClick={this.fn}>点我有惊喜</a>)
    }
 
}
 
//渲染react
ReactDOM.render(<App/>, document.getElementById("root"));
  • 此处的fn(e){}参数的e,就是系统帮我们产生的事件对象
  • 这个对象我们可以任意命名(a,b,c...)
  • preventDefault(): 它是事件对象的一个方法，作用是取消一个目标元素的默认行为
  • 此处的目标对象就是超链接<a>, 那超链接的默认行为就是点击链接跳转到链接的地址
  • 因此我们可以通过调用事件对象的preventDefault()方法来取消链接跳转
avatar
文章
阅读
粉丝