React Button Reset Filters 方法清除信息

Question

我有一个待办事项列表来获取这个 endpoint

我实现了一些过滤器

搜索标题
切换已完成和未完成的待办事项
ID 的多个 select 过滤器

我现在正在实施重置过滤器，它正在重新获取待办事项列表，这是方法 resetFilters

  const resetFilters = () => {
    const fetchPosts = async () => {
      setLoading(true);
      const res = await axios.get(
        "https://jsonplaceholder.typicode.com/todos/"
      );
      setIsCompleted(null);
      setSearchValue("");
      setTasks(res.data);
      setFilteredData(res.data);
      setLoading(false);
    };
    fetchPosts();
  };

重置过滤器方法工作正常，除了不取消我在搜索输入中输入的文本，切换回切换开关或从过滤器列中的多个 select 中删除 ID 号

如何清除我的方法中的所有这些信息 resetFilters？

我转载了demo here

Answer 1

您的输入字段不受控制。我已经编辑了您的演示，请在此处查看。 https://codesandbox.io/s/so-68247206-forked-vffwt?file=/src/App.js

我已将 value 属性添加到您的 SearchInput 组件，以便控制输入。让我知道这是否有帮助

React Button Reset Filters 方法清除信息

React Button Reset Filters method to clear out info

javascript

reactjs

material-ui

codesandbox

react-hooks