在 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>
);
我有两个问题。首先,如果下拉菜单打开,我再次单击按钮后,它应该关闭。其次,我需要过滤掉上面显示的值。选择后,它应该会从可用选项中消失?
在这里检查我的代码沙箱
<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>
);