时间戳

首页 > 解决方案 > React Button Reset Filters 方法清除信息

javascript - React Button Reset Filters 方法清除信息

问题描述

我有一个获取此端点的待办事项列表

我已经实现了一些过滤器

  1. 搜索标题
  2. 切换待办事项已完成和未完成
  3. id 的多选过滤器

我现在正在实现重置过滤器，它正在重新获取待办事项列表，这个方法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();
  };

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

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

我在这里复制了演示

标签： javascriptreactjsreact-hooksmaterial-uicodesandbox

解决方案

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

我已向您的 SearchInput 组件添加了 value 道具，因此输入将受到控制。让我知道这是否有帮助

推荐阅读