ReactJS 如何调用事件时执行 stopPropagation？

在ReactJS中，如果你想要在调用事件处理器时阻止事件的冒泡，你需要在事件处理函数中调用event.stopPropagation()。这会阻止事件进一步传播到父元素。这里是一个例子：

jsx
class MyComponent extends React.Component {
  handleClick = (event) => {
    // 阻止事件向上传播
    event.stopPropagation();

    // 事件处理逻辑
    console.log('Button clicked!');
  }

  render() {
    return (
      <div onClick={() => console.log('Div clicked!')}>
        <button onClick={this.handleClick}>Click me</button>
      </div>
    );
  }
}

在这个例子中，当你点击按钮时，handleClick 事件处理器会被触发。由于在处理器中调用了 event.stopPropagation()，所以点击事件不会冒泡到外层的 div 元素上，因此外层的 div 上的 onClick 处理器不会被执行。所以当你点击按钮时，你只会在控制台看到 "Button clicked!"，而不会看到 "Div clicked!"。

对于使用函数组件的情况，代码会稍微有些不同：

jsx
function MyComponent() {
  function handleClick(event) {
    // 阻止事件向上传播
    event.stopPropagation();

    // 事件处理逻辑
    console.log('Button clicked!');
  }

  return (
    <div onClick={() => console.log('Div clicked!')}>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

在这个函数组件的示例中，handleClick 函数的工作原理类似于类组件中的方法。它也会阻止事件冒泡，以避免触发外层 div 的 onClick 事件。