2 下拉 select 选项迭代相同的数组但不应该 select 相同的 selected 值（ReactJS）

Question

目前我正在尝试构建 2 个仅显示列的下拉 select 选项组件，但重点是它不应在其他下拉列表中显示已经 selected 的值 select 选项。所以每个值只能 selected 一次。那么我该如何在代码中解决这个问题。

父组件

    return (
        <div>
            <TableDropdownFilter
                columns={columns}
                onSelect={setHiddenCol1}
            />
            <TableDropdownFilter
                columns={columns}
                onSelect={setHiddenCol2}
            />
            <Table
                columns={columns}
                data={data}
                hiddenColumnsOne={hiddenCol1}
                hiddenColumnsTwo={hiddenCol2}
            />
        </div>
    )

子组件

interface TableDropdownProps {
    columns: any;
    onSelect: any;
    firstFilter?: string;
    secondFilter?: string;
}

export const TableDropdownFilter: FC<TableDropdownProps> = ({
    columns,
    onSelect,
    firstFilter,
    secondFilter
}) => {
    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);
    console.log(firstFilter, secondFilter);
    return (
        <TableFilter>
            <TableFilterBlock ref={wrapperRef}>
                <TableFilterInput onClick={() => toggleDropdownOpen()}>
                    {columnShow.length > 0 ? columnShow : "Select"}</TableFilterInput>
                {typeof columnShow}
                <TableFilterDropdown toggleDropdown={openDropdown}>
                    {columns.slice(1).map((item: any, index: number) => (

                        <TableDropdownList key={index}>
                            <div onClick={() => dropdownFilter(item.id)}>
                                {item.id}
                            </div>
                        </TableDropdownList>
                    ))}
                </TableFilterDropdown>
            </TableFilterBlock>
        </TableFilter>
    )
}

Answer 1

您只需将一个值传递给 TableDropdownFilter 组件进行过滤。使用传递的 filter 属性对 columns 选项进行内联过滤。

TableDropdownFilter

interface TableDropdownProps {
  columns: any;
  onSelect: any;
  filter?: string; // <-- single filter by value
}

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

  ...

  return (
    <TableFilter>
      <TableFilterBlock ref={wrapperRef}>
        <TableFilterInput onClick={() => toggleDropdownOpen()}>
          {columnShow.length > 0 ? columnShow : "Select"}
        </TableFilterInput>
        {typeof columnShow}
        <TableFilterDropdown toggleDropdown={openDropdown}>
          {columns
            .slice(1)
            .filter((item: any) => item.id !== filter) // <-- filter by item is
            .map((item: any, index: number) => (
              <TableDropdownList key={index}>
                <div onClick={() => dropdownFilter(item.id)}>{item.id}</div>
              </TableDropdownList>
            ))}
        </TableFilterDropdown>
      </TableFilterBlock>
    </TableFilter>
  );
};

表格组件

为“其他”select 输入传递适当的 filter 值。

export const TableComponent: FC<TableComponentProps> = ({ columns }) => {
  const [hiddenCol1, setHiddenCol1] = useState<string>("");
  const [hiddenCol2, setHiddenCol2] = useState<string>("");
  const data = useMemo(() => TableContent, []);

  return (
    <div>
      <TableDropdownFilter
        columns={columns}
        onSelect={setHiddenCol1}
        filter={hiddenCol2} // <-- filter by dropdown 2 value
      />
      <TableDropdownFilter
        columns={columns}
        onSelect={setHiddenCol2}
        filter={hiddenCol1} // <-- filter by dropdown 1 value
      />
      <Table
        columns={columns}
        data={data}
        hiddenColumnsOne={hiddenCol1}
        hiddenColumnsTwo={hiddenCol2}
      />
    </div>
  );
};

2 下拉 select 选项迭代相同的数组但不应该 select 相同的 selected 值（ReactJS）

2 dropdown select option iterating through same array but should not be able to select same selected value (ReactJS)

javascript

reactjs

dropdown