一次重置所有過濾器

Question

我的網站上有一個側邊欄，其中有 8 個選項來過濾汽車。 每個參數都以下拉列表的形式制作。 參數以各種樣式制作 - 日歷、復選框、標簽輸入、開/關按鈕。

當用戶想要重置所有過濾器時，他不方便將所有東西都恢復到原來的位置。 我想添加一個按鈕，將側邊欄帶到其原始位置。

我添加了一個非常簡化的代碼。 在這里，我創建了一個側邊欄，並在其中規定了每個組件（過濾器）。

    export default function FiltersSideBar({className}) {
    return (
        <CardContent className={className}>
            <Table>
                <TableBody>

                    <TableRow>
                        <TableCell>
                            <Filter1/>
                        </TableCell>
                    </TableRow>

                    <TableRow>
                        <TableCell>
                            <Filter2/>
                        </TableCell>
                    </TableRow>

                    <TableRow>
                        <TableCell>
                            <Filter3/>
                        </TableCell>
                    </TableRow>

                    <button>Reset All Filters</button>

                </TableBody>
            </Table>
        </CardContent>
    );
}

有什么簡單的方法可以重置所有過濾器並重置側邊欄嗎？

Answer 1

首先，你不需要設置同一個組件的兩個文件FilterDateTime.js ，它們是同一個組件，你可以使用不同的 props 值。 這是components的主要概念。

關於過濾器，每個過濾器都應該有一個state控件，如filterDateTimeOpen控制日期輸入是否打開， time狀態控制過濾器的開始和結束日期。

狀態的好處是它只由setState函數更新。 然后更新 UI，當組件卸載時，狀態也重新初始化為默認狀態。

因此，要重置過濾器，您需要為控制每個過濾器的每個state設置setState 。

請看看這個。

https://codesandbox.io/s/serene-mayer-6h28sy

Answer 2

假設您不想使用上下文或 redux，您必須將狀態拉到您的 FiltersSidebar（即，不是每個組件處理它自己的“過濾器值”，而是在父 FiltersSidebar 中跟蹤所有這些） .

所以像：

export default function FiltersSideBar({className}) {

    const [filter1Value, setFilter1Value] = useState();
    const [filter2Value, setFilter2Value] = useState();
    const [filter3Value, setFilter3Value] = useState();

    const onResetAll = () => {
      setFilter1Value(null);
      setFilter2Value(null);
      setFilter3Value(null);
    }

    return (
        <CardContent className={className}>
            <Table>
                <TableBody>

                    <TableRow>
                        <TableCell>
                            <Filter1 value={filter1Value}/>
                        </TableCell>
                    </TableRow>

                    <TableRow>
                        <TableCell>
                            <Filter2 value={filter2Value}/>
                        </TableCell>
                    </TableRow>

                    <TableRow>
                        <TableCell>
                            <Filter3 value={filter3Value}/>
                        </TableCell>
                    </TableRow>

                    <button onClick={onResetAll}>Reset All Filters</button>

                </TableBody>
            </Table>
        </CardContent>
    );
}

Answer 3

您可以擁有一個具有默認過濾器狀態的對象，並創建一個在您想要的任何位置重置過濾器的功能，因此，您可以執行以下操作：

// Declare a object with your filters
const defaultFilterState = {
  filter1: [],
  filter2: [],
  filter3: [],
  filter4: [],
};

export default function FiltersSideBar({ className }) {
  // declare state
  const [filters, setFilters] = useState(defaultFilterState);

  // Reset all filters
  const resetFilters = () => setFilters(defaultFilterState);

  return (
    <CardContent className={className}>
      <Table>
        <TableBody>
          <TableRow>
            <TableCell>
              <Filter1 value={filters.filter1} />
            </TableCell>
          </TableRow>

          <TableRow>
            <TableCell>
              <Filter2 value={filters.filter2} />
            </TableCell>
          </TableRow>

          <TableRow>
            <TableCell>
              <Filter3 value={filters.filter3} />
            </TableCell>
          </TableRow>

          <TableRow>
            <TableCell>
              <Filter4 value={filters.filter4} />
            </TableCell>
          </TableRow>

          <button onClick={resetFilters}>Reset All Filters</button>
        </TableBody>
      </Table>
    </CardContent>
  );
}