React-select - 无法在valueRenderer组件上停止传播

Question

我试图在反应选择的选定值元素上点击时显示一个弹出窗口，如下所示：

当我点击弹出窗口触发器，下拉列表打开以及弹出窗口时，我的问题就出现了...我只想打开弹出窗口，我尝试e.nativeElement.stopPropagation，e.stopPropagation，{{1}等等没有成功。这是一个沙箱如果你想知道我是如何做到这一点以及如何重现这个问题。

https://codesandbox.io/s/pjv7vmlv3j

谢谢你的帮助

Answer 1

我找到了取消活动的方法。我只需在onValueClick添加<Select />道具并将stopPropagation放在那里！

Answer 2

react-select打开下拉列表是对onMouseDown事件的反应，而不是对onClick的响应，这就是任何onClick={(e) => e.stopPropagation()}都无法阻止打开下拉列表的原因。您需要添加onMouseDown={(e) => e.stopPropagation()}和onClick处理程序以仅打开弹出窗口。

在your code中，以下代码应该可以解决问题：

    <span onMouseDown={e => e.stopPropagation()} style={styles.root}>
      <span style={styles.label}>{label}</span>
      <OverlayTrigger
        trigger="click"
        rootClose
        placement="bottom"
        overlay={popover}
        animation={false}
      >
        <span style={styles.trigger}>{`${selected} / ${contacts.length}`}</span>
      </OverlayTrigger>
    </span>