如何在刪除搜索欄中的值時更新表格？

Question

我可以搜索與搜索欄中的值匹配的表，但 state 在刪除值時沒有更新。 這是我的沙盒鏈接

Answer 1

您的搜索輸入應使用類似的 onChange 處理程序。

您的初始數據不應直接設置在您的useState中，將其分離到一個名為（ie:) 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);
    }
  };

沙盒演示