React中Dropdown下拉值过滤及点击开关控制功能实现问题

1. 点击触发按钮切换下拉开闭状态 #

• 修改触发按钮的点击事件逻辑，将原来强制设置为展开的逻辑改为状态取反即可实现切换效果：

// 原触发按钮点击逻辑
// setIsComponentVisible(true)
// 修改后
setIsComponentVisible(prev => !prev)

• 如果你同时接入了点击外部关闭下拉的逻辑，需要额外给触发按钮绑定ref，在外部点击的判断逻辑中排除触发按钮的点击事件，避免触发两次状态更新导致切换失效：

const triggerRef = useRef(null);
// useOnClickOutside 逻辑中增加 triggerRef 的排除判断
useOnClickOutside([ref, triggerRef], () => {
  setIsComponentVisible(false)
})

之后给触发按钮DOM绑定ref={triggerRef}即可。

• 补充：选择选项后可同步在handleSelect函数中添加setIsComponentVisible(false)逻辑，实现选完自动关闭下拉的效果。

2. 过滤已选中的下拉选项 #

• 单选场景下首先用变量存储已选中的选项值，比如selectedStatus，在遍历statuses之前先做一次过滤，排除和已选中值相等的项即可，修改后的代码如下：

<DropdownMenu show={isComponentVisible} ref={ref}>
  {statuses
    .filter(({ statusName }) => statusName !== selectedStatus)
    .map(({ id, statusName }) => (
      <MenuButton
        type="button"
        key={id}
        onClick={() => handleSelect(statusName)}
      >
        {statusName}
      </MenuButton>
  ))}
</DropdownMenu>

• 如果是多选场景，只需要把已选中值改为数组存储，过滤逻辑调整为!selectedStatusArr.includes(statusName)即可。

内容的提问来源于stack exchange，提问作者Joseph