ReactJS中两个遍历同数组的下拉框如何禁止选择相同值

1. 修改父组件逻辑 #

父组件已经持有两个下拉的选中状态hiddenCol1、hiddenCol2，只需要把对方的选中值作为排除参数传给对应子组件即可，修改后代码如下：

return (
    <div>
        {/* 第一个下拉排除第二个下拉的选中值 */}
        <TableDropdownFilter
            columns={columns}
            onSelect={setHiddenCol1}
            excludeValue={hiddenCol2}
        />
        {/* 第二个下拉排除第一个下拉的选中值 */}
        <TableDropdownFilter
            columns={columns}
            onSelect={setHiddenCol2}
            excludeValue={hiddenCol1}
        />
        <Table
            columns={columns}
            data={data}
            hiddenColumnsOne={hiddenCol1}
            hiddenColumnsTwo={hiddenCol2}
        />
    </div>
)

2. 修改子组件TableDropdownFilter逻辑 #

首先调整Props定义，新增excludeValue参数用于接收需要排除的选项值，然后渲染下拉列表前先过滤掉被排除的选项，修改后代码如下：

interface TableDropdownProps {
    columns: any;
    onSelect: any;
    // 新增：需要排除的选项值
    excludeValue?: string;
}

export const TableDropdownFilter: FC<TableDropdownProps> = ({
    columns,
    onSelect,
    excludeValue
}) => {
    const [columnShow, setColumnShow] = useState<string>("");
    const [openDropdown, setOpenDropdown] = useState(false);
    const wrapperRef = useRef(null);

    const useOutsideAlerter = (ref: any) => {
        useEffect(() => {
            const handleClickOutside = (event: MouseEvent) => {
                if (ref.current && !ref.current.contains(event.target)) {
                    setOpenDropdown(false)
                }
            }

            document.addEventListener("mousedown", handleClickOutside);
            return () => {
                document.removeEventListener("mousedown", handleClickOutside);
            };
        }, [ref]);
    }

    useOutsideAlerter(wrapperRef)

    const dropdownFilter = (selectedColumn: string) => {
        setColumnShow(selectedColumn);
        setOpenDropdown(false);
        onSelect(selectedColumn);
    }

    const toggleDropdownOpen = () => setOpenDropdown(!openDropdown);
    
    // 新增：过滤掉需要排除的选项
    const filteredColumns = columns.slice(1).filter((item: any) => item.id !== excludeValue)

    return (
        <TableFilter>
            <TableFilterBlock ref={wrapperRef}>
                <TableFilterInput onClick={() => toggleDropdownOpen()}>
                    {columnShow.length > 0 ? columnShow : "Select"}</TableFilterInput>
                <TableFilterDropdown toggleDropdown={openDropdown}>
                    {/* 替换原来的columns为过滤后的filteredColumns */}
                    {filteredColumns.map((item: any, index: number) => (
                        <TableDropdownList key={index}>
                            <div onClick={() => dropdownFilter(item.id)}>
                                {item.id}
                            </div>
                        </TableDropdownList>
                    ))}
                </TableFilterDropdown>
            </TableFilterBlock>
        </TableFilter>
    )
}

可选优化点 #

• 如果需要支持清空选中状态，可以在下拉列表顶部加一个「清空」选项，点击时把选中值设为空字符串即可，对应的被排除的选项就会恢复到另一个下拉的可选列表中
• 可以给columns定义明确的TS类型，替换掉现在的any类型，提升类型安全性

内容的提问来源于stack exchange，提问作者Front-end Developer