防止选择在选择值后关闭

Question

我使用该组件在 Javascript React 中创建了一个自定义下拉菜单react-select。通过使用optionComponentprop，我能够使用复选框渲染每个选项（见图）。我现在的问题是，一旦您单击任何复选框，选择选项就会关闭，这不是很好的用户体验。

图像：

因此，我的问题是，是否有任何方法可以阻止下拉菜单关闭，直到用户单击选择右侧的箭头，以便可以在关闭选项之前勾选和取消勾选任意数量的复选框。

Answer 1

You could stopPropagation of the click event from the checkbox element.

Let's assume this is your checkbox click handler:

onClickHandler = (e) => {
    e.stopPropagation();
    //do some other logic
}

This way, when the checkbox is clicked, it will not trigger the select handler on the dropdown.