26、React事件处理全解析

React事件处理全解析

在React开发中，事件处理是一个非常重要的部分。下面将详细介绍React中事件处理的相关知识，包括事件类型区分、避免事件复用陷阱、使用自定义参数调用事件处理程序、阻止默认行为以及事件传播等内容。

1. 区分事件类型

在React中，调用事件处理函数时总是会提供一个 SyntheticEvent 对象。这可能会让习惯使用 instanceof 关键字来区分DOM API创建的事件的开发者感到困惑。

以下是一个示例代码，展示了如何区分 MouseUp 和 MouseDown 事件：

import React, { Component } from 'react';
export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            message: "Ready"
        }
    }
    handleEvent = (event) => {
        if (event.type === "mousedown") {
            this.setState({ message: "Down"});
        } else {
            this.setState({ message: "Up"});
        }