防止选择在选择值后关闭

Question

我使用

react-select

组件在 Javascript React 中创建了一个自定义下拉菜单。通过使用

optionComponent

属性，我能够使用复选框渲染每个选项（见图）。我现在的问题是，一旦您单击任何复选框，选择选项就会关闭，这不是很好的用户体验。

图片：

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

Answer 1

您可以从复选框元素中stopPropagation。

我们假设这是您的复选框单击处理程序：

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

这样，当单击复选框时，它不会触发下拉菜单上的选择处理程序。

Answer 2

对于任何试图停止执行

e.stopPropagation()

但仍然不起作用的人，我发现的解决方法是将

z-index: -1

设置为我的自定义组件。结果是将我的组件放在react-select正在创建的行下方，所以我的组件看起来像是被单击了，但真正做的是监听该行上的单击。

示例：

      <components.Option
        {...rest}
        isDisabled={isDisabled}
        isFocused={isFocused}
        isSelected={isSelected}
        innerProps={props}
      >
        <CustomCheckbox
          isSelected={isSelected}
          isDisabled={isDisabled}
          style={{ zIndex: '-1' }} // Easiest possible fix for the issue when clicking on a custom element would dismiss the list Popup.
        >
          <div className={'px-6 text-t-primary'}>{children}</div>
        </CustomCheckbox>
      </components.Option>