CSS React – 阻止子组件触发父组件的事件

在本文中，我们将介绍在React中如何阻止子组件触发父组件的事件。在React开发中，经常会遇到子组件触发父组件事件的情况，有时候我们需要阻止这种事件的传递，只在子组件中处理。

阅读更多：CSS 教程

为什么需要阻止传递事件

在React的组件化开发中，我们常常将页面分解为多个可重用的组件。父组件和子组件之间通过props来传递数据和方法。当子组件在某个交互操作中触发事件，如果不做任何处理，事件会一直冒泡到父组件，可能会触发不必要的操作，导致应用功能出错或性能下降。

为了避免这种情况，我们需要在子组件中阻止事件的传递。下面我们将介绍两种在React中实现这个目标的方法。

方法一：使用stopPropagation()

stopPropagation()是JavaScript中的一个方法，用于阻止事件冒泡。在React中，我们可以通过e.stopPropagation()来调用它，其中e是事件对象。

例如，我们有一个父组件Parent和一个子组件Child。当点击子组件时，我们不想父组件的点击事件被触发，可以在子组件的点击事件处理函数中加入e.stopPropagation()。

class Parent extends React.Component {
  handleClick() {
    console.log("父组件被点击");
  }

  render() {
    return (
      <div onClick={this.handleClick.bind(this)}>
        <Child />
      </div>
    );
  }
}

class Child extends React.Component {
  handleClick(e) {
    e.stopPropagation();
    console.log("子组件被点击");
  }

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

上述代码中，当点击子组件时，只会输出”子组件被点击”，而不会触发父组件的点击事件。

方法二：使用capture phase

除了使用stopPropagation()，我们还可以利用事件的捕获阶段，在父组件中通过addEventListener()来监听事件，在子组件中调用e.preventDefault()来阻止事件继续传递。

class Parent extends React.Component {
  handleClick() {
    console.log("父组件被点击");
  }

  componentDidMount() {
    const parentDiv = document.getElementById("parentDiv");
    parentDiv.addEventListener("click", this.handleClick.bind(this), true);
  }

  render() {
    return (
      <div id="parentDiv">
        <Child />
      </div>
    );
  }
}

class Child extends React.Component {
  handleClick(e) {
    e.preventDefault();
    console.log("子组件被点击");
  }

  render() {
    return <div>子组件</div>;
  }
}

在上述代码中，我们在父组件的componentDidMount()生命周期方法中通过addEventListener()来添加事件监听，并设置capture为true。这样在捕获阶段，事件会先进入父节点的处理函数。而在子组件的handleClick()方法中，通过e.preventDefault()来阻止事件传递。

使用这种方法，当点击子组件时，只会输出”子组件被点击”，而不会触发父组件的点击事件。