如何在 React 中阻止事件冒泡

事件冒泡是指在 Web 开发中当一个元素触发某个事件时，该事件会向上层元素传播，直到到达文档根节点。在 React 中，我们可以使用一些技术手段来取消或阻止事件冒泡的传播。本文将介绍几种常见的方法来实现这一目标。

方法一：使用事件对象的 stopPropagation() 方法

React 中的事件处理函数会接收到一个事件对象，我们可以调用该对象的 stopPropagation() 方法来取消事件的继续传播。下面是一个示例代码：

import React from 'react';

class MyComponent extends React.Component {
  handleClick = (event) => {
    event.stopPropagation();
    // 处理点击事件
  }

  render() {
    return (
      <div onClick={this.handleClick}>
        <button>Click me</button>
      </div>
    );
  }
}

在上面的代码中，当按钮被点击时，handleClick 方法会被调用，并且在该方法中调用 event.stopPropagation()，从而阻