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

Question

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

当我点击酥料饼触发我的问题发生，下拉打开，酥料饼太...我只是想开酥料饼的，我试过了e.nativeElement.stopPropagation，e.stopPropagation，e.preventDefault等没有成功。这是一个沙箱 如果您想知道我是如何做到这一点以及如何重现该问题的。

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处理程序一起添加以仅打开弹出窗口。

在您的代码中，下面的代码段应该可以解决问题：

    <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>