我遇到过同样的问题。我发现 stopPropagation确实有效。我会将列表项拆分为一个单独的组件，如下所示：

class List extends React.Component {
  handleClick = e => {
    // do something
  }

  render() {
    return (
      <ul onClick={this.handleClick}>
        <ListItem onClick={this.handleClick}>Item</ListItem> 
      </ul>
    )
  }
}

class ListItem extends React.Component {
  handleClick = e => {
    e.stopPropagation();  //  <------ Here is the magic
    this.props.onClick();
  }

  render() {
    return (
      <li onClick={this.handleClick}>
        {this.props.children}
      </li>       
    )
  }
}

React 使用事件委托和文档上的单个事件侦听器来处理冒泡事件，例如本例中的“单击”，这意味着无法停止传播；当您在 React 中与其交互时，真实事件已经传播。在 React 的合成事件上停止传播是可能的，因为 React 在内部处理合成事件的传播。

stopPropagation: function(e){
    e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation();
}

关于 DOM 事件的顺序：CAPTURING vs BUBBLING

事件如何传播有两个阶段。这些被称为“捕获”和“冒泡”。

               | |                                   / \
---------------| |-----------------   ---------------| |-----------------
| element1     | |                |   | element1     | |                |
|   -----------| |-----------     |   |   -----------| |-----------     |
|   |element2  \ /          |     |   |   |element2  | |          |     |
|   -------------------------     |   |   -------------------------     |
|        Event CAPTURING          |   |        Event BUBBLING           |
-----------------------------------   -----------------------------------

捕获阶段首先发生，然后是冒泡阶段。当您使用常规 DOM api 注册事件时，默认情况下事件将成为冒泡阶段的一部分，但这可以在事件创建时指定

// CAPTURING event
button.addEventListener('click', handleClick, true)

// BUBBLING events
button.addEventListener('click', handleClick, false)
button.addEventListener('click', handleClick)

在 React 中，冒泡事件也是你默认使用的。

// handleClick is a BUBBLING (synthetic) event
<button onClick={handleClick}></button>

// handleClick is a CAPTURING (synthetic) event
<button onClickCapture={handleClick}></button>

让我们来看看我们的 handleClick 回调（React）：

function handleClick(e) {
  // This will prevent any synthetic events from firing after this one
  e.stopPropagation()
}

function handleClick(e) {
  // This will set e.defaultPrevented to true
  // (for all synthetic events firing after this one)
  e.preventDefault()  
}

我没有看到这里提到的替代方案

如果在所有事件中调用 e.preventDefault() ，则可以检查事件是否已被处理，并防止再次处理它：

handleEvent(e) {
  if (e.defaultPrevented) return  // Exits here if event has been handled
  e.preventDefault()

  // Perform whatever you need to here.
}

合成事件和原生事件的区别见React文档：https : //reactjs.org/docs/events.html

这是防止单击事件前进到下一个组件然后调用您的函数的简单方法。

<Button onClick={(e)=> {e.stopPropagation(); yourFunction(someParam)}}>Delete</Button>

这是不是100％完美，但如果它要么是太痛苦的向下传递props的孩子- >儿童时装或创建Context.Provider/Context.Consumer 只用于此目的），而你处理的是有它自己的处理器运行的另一个库在你之前，你也可以尝试：

   function myHandler(e) { 
        e.persist(); 
        e.nativeEvent.stopImmediatePropagation();
        e.stopPropagation(); 
   }

据我了解，该event.persist方法可防止对象立即被扔回 React 的SyntheticEvent池中。因此，event当您到达 React 时，传入的 React 实际上并不存在！这发生在孙子中是因为 React 在内部处理事情的方式是首先检查父级的SyntheticEvent处理程序（特别是如果父级有回调）。

只要您不调用persist会产生重要记忆的东西来继续创建事件，例如onMouseMove（并且您没有创建某种 Cookie Clicker 游戏，例如 Grandma's Cookies），它应该完全没问题！

另请注意：通过偶尔阅读他们的 GitHub，我们应该密切关注 React 的未来版本，因为他们最终可能会解决一些与此有关的痛苦，因为他们似乎打算在编译器/转译器中制作折叠 React 代码。