如何使用“react-select”组件为“onClick”事件调用“e.stopPropagation()”？

Question

我有一个组件，当你点击它的任何地方时它会执行一个动作，除非你点击某些有自己onClick处理程序的子组件。这些onClick处理程序能够通过调用e.stopPropagation. 我如何类似地捕获和stopPropagation()在ReactSelect组件的onClick事件上？普通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>