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

【问题标题】：React-select - can't stopPropagation on valueRenderer componentReact-select - 无法在 valueRenderer 组件上停止传播
【发布时间】：2017-11-20 14:10:07
【问题描述】：

我正在尝试在单击 react-select 选定值元素时显示一个弹出框，如下所示：

我的问题发生在我单击弹出框触发器时，下拉菜单打开并且弹出框也...我只想打开弹出框，我尝试了e.nativeElement.stopPropagation、e.stopPropagation、e.preventDefault 等等但没有成功.这是一个沙盒如果您想知道我是如何做到这一点以及如何重现该问题。

https://codesandbox.io/s/pjv7vmlv3j

感谢您的帮助

【问题讨论】：

React-Select onClick on multi tag prevent open dropdown的可能重复

标签： javascript reactjs react-bootstrap react-select

【解决方案1】：

react-select 打开下拉菜单作为对onMouseDown 事件的反应，而不是onClick，这就是为什么任何onClick={(e) => e.stopPropagation()} 都无法阻止打开下拉菜单的原因。您需要添加 onMouseDown={(e) => e.stopPropagation()} 和 onClick 处理程序才能仅打开弹出框。

在your code 下面的 sn-p 应该可以解决问题：

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

【讨论】：

【解决方案2】：

好吧，我找到了取消活动的方法。我只是在<Select /> 中添加了一个onValueClick 属性并将stopPropagation 放在那里！

【讨论】：

是的，这对我也有用，但内容被插入到额外的 <a> 元素中，这破坏了我的 CSS :(