在 React 中过滤掉下拉值

Filter Out Dropdown Values in React

我有两个问题。首先,如果下拉菜单打开,我再次单击按钮后,它应该关闭。其次,我需要过滤掉上面显示的值。选择后,它应该会从可用选项中消失?

在这里检查我的代码沙箱

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

单击按钮时,将 isComponentVisible 设置为 true,但也会调用 handleClickOutside,并将其设置为 false:

const handleClickOutside = (event) => {
  if (ref.current && !ref.current.contains(event.target)) {
    setIsComponentVisible(false);
  }
};

handleClickOutside 应该忽略该按钮。您可以为按钮创建另一个 ref。例如:

const handleClickOutside = (event) => {
  if (
    ref.current &&
    !ref.current.contains(event.target) &&
    buttonRef.current &&
    !buttonRef.current.contains(event.target)
  ) {
    setIsComponentVisible(false);
  }
};

要过滤项目,根据当前项目,只需在您的主要组件中添加一个简单的过滤器即可:

const currentStatuses = status
  ? statuses.filter(s => s.statusName !== status)
  : statuses;

return (
  <MainContainer>
    <DropdownContainer>
      <Dropdown
        status={status}
        statuses={currentStatuses}
        handleSelect={handleSelect}
      />
    </DropdownContainer>
  </MainContainer>
);