javascript - 如何使用 `e.stopPropagation()` 组件调用 `onClick` 事件来处理 `react-select` 事件？

Question

我有一个组件，当您单击其上的任意位置时，该组件会执行操作，除非您单击具有自己的 onClick 处理程序的某些子组件。这些 onClick 处理程序能够通过调用 e.stopPropagation 来阻止其父级执行其标准操作。如何类似地捕获 ReactSelect 组件的 onClick 事件上的 stopPropagation() ？普通的 onClick 处理程序永远不会被调用。

这基本上是所描述的设置(ES6):

handleMost = e => { 
  // Note that I cannot check e.target here, because there is a bunch
  // of other stuff that might be the target that still should cause
  // the standard action to occur 
  doStandardThing();
}

handleFoo = e => { e.stopPropagation(); doSomethingFoo(); }}
handleBar = e => { e.stopPropagation(); doSomethingBar(); }}
handleBaz = e => { e.stopPropagation(); doSomethingBaz(); }}

<ListItem onClick={handleMost}>
  <Foo onClick={handleFoo}
  <Bar onClick={handleBar}
  <ReactSelect ?????={handleBaz}

  <OtherStuff ...>
</ListItem>

Answer 1

我查看了react-select的所有事件，但似乎不符合您的目的。

我想作为一种解决方法，您可以尝试将 ReactSelect 组件包装在另一个元素中。

<span onClick={e => ....}>
  <ReactSelect />
</span>