React中阻止事件冒泡的方法及示例代码

在React中，阻止事件冒泡是指防止事件从子组件向父组件传播。这在某些情况下非常有用，特别是当你想要在子组件中处理事件并防止它继续传递到父组件时。本文将介绍React中阻止事件冒泡的方法，并提供相应的示例代码。

方法一：使用event.stopPropagation()

React中可以使用event.stopPropagation()方法来阻止事件冒泡。当事件触发时，调用该方法可以阻止事件向上冒泡，即停止事件传播到更高层级的组件。

下面是一个示例代码，演示了如何在React中使用event.stopPropagation()来阻止事件冒泡：

import React from 'react';

class ChildComponent extends React.Component {
  handleClick = (event) => {
    event.stopPropagation();
    console.log('子组件被点击');
  };

  render() {
    return (
      <div onClick={this.handleClick}>
        子组件
      </div>
    );
  }
}

class ParentComponent extends React.Component {
  handleClick = () => {