javascript - 如何在删除搜索栏中的值时更新表格？

Question

我可以在我的搜索栏中搜索与值匹配的表，但在删除值时状态没有更新。这是我的沙盒链接

标签： javascriptreactjsantd

Answer 1

您的搜索输入应使用类似的 onChange 处理程序。

useState你的初始数据不应该直接设置在你data.js 的data.

然后在输入更改时，只需过滤数据并选择最匹配的行。

  const handleSearchChange = e => {
    const {
      target: { value }
    } = e;
    if (!!value) {
      const filteredData = data.filter(row => {
        return Object.values(row)
          .join(" ")
          .toLowerCase()
          .includes(value.toLowerCase());
      });
      setIsAll(filteredData);
    } else {
      setIsAll(data);
    }
  };

沙盒演示