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

IT技术 javascript reactjs react-bootstrap react-select
2021-05-04 17:54:51

我试图在点击react选择选定的值元素时显示一个弹出窗口，如下所示： 预期结果

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

https://codesandbox.io/s/pjv7vmlv3j

谢谢你的帮助

2个回答

react-select 打开下拉菜单作为对onMouseDown事件的react，而不是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>

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

其它你可能感兴趣的问题
上一篇青铜灯丝问题 下一篇z 轴 M5 驱动螺母在丝杠上超松是否有原因？