如何用`react-select`組件爲'onClick`事件調用`e.stopPropagation（）`？

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

我看了一下從反應選擇所有的事件，但目前看來，它不適合你的目的。

我想作爲一種解決方法，您可以嘗試將ReactSelect組件包裝到另一個元素中。

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