React-select

Question

我试图在点击 react-select selected 值元素时显示弹出窗口，如下所示：

我的问题发生在我单击弹出窗口触发器时，下拉菜单打开，弹出窗口也打开...我只想打开弹出窗口，我尝试了 e.nativeElement.stopPropagation、e.stopPropagation、e.preventDefault 等等都没有成功。如果你想知道我是怎么做到的以及如何重现这个问题，这里有一个沙箱。

https://codesandbox.io/s/pjv7vmlv3j

谢谢你的帮助

Answer 1

好吧，我找到了取消活动的方法。我只是向 <Select /> 添加一个 onValueClick 道具并将 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>

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

React-select - can't stopPropagation on valueRenderer component

javascript

reactjs

react-bootstrap