时间戳

首页 > 解决方案 > 从输入中搜索时过滤掉行数据

reactjs - 从输入中搜索时过滤掉行数据

问题描述

我尝试过滤掉显示在 UI 中的行数据，当 name 或 lname 与搜索条件（即搜索）匹配时，我无法过滤掉行数据

标签： reactjs

解决方案

我只是重构了一些我删除它的东西：

const filterData = () => {
    if (search === "") {
      return items;
    }
  };

然后我将项目更新为函数，如果搜索被定义为道具，你会过滤吗

import React from "react";
export const CustTable = ({ columns, data, setData, search, setSearch }) => {
  const [editable, setEditable] = React.useState("");
  const cellEditable = (label) => {
    data.map((l) => {
      if (l.name === label.name) {
        setEditable(label.name);
      }
    });
  };
  const changeLastName = (name, e, index) => {
    e.persist();
    setData((prevData) => {
      return [
        ...prevData.slice(0, index),
        { name, lname: e.target.value },
        ...prevData.slice(index + 1)
      ];
    });
  };
  const items = () => {
    let resultItems = data;
    if (search) {
      resultItems = data.filter((item) =>
        item.name.toLowerCase().includes(search.toLowerCase())
      );
    }

    return resultItems.map((label, index) => {
      return (
        <tr style={{ display: "flex" }} key={index}>
          <span style={{ width: "35%" }}>{label.name} </span>
          {editable === label.name ? (
            <input
              type="text"
              value={label.lname}
              onChange={(e) => changeLastName(label.name, e, index)}
            />
          ) : (
            <span onClick={() => cellEditable(label)}>{label.lname} </span>
          )}
        </tr>
      );
    });
  };

  const searchData = (e) => {
    setSearch(e.target.value);
  };

  return (
    <>
      <div>
        <input
          type="search"
          placeholder="search"
          onChange={(e) => searchData(e)}
        />
      </div>
      {items()}
    </>
  );
};

https://codesandbox.io/s/customtablereact-forked-f01c6

推荐阅读