javascript - 表的 react 搜索功能

Question

我正在制作一个使用 table 的 react 项目，我需要为其添加搜索功能。现在该表已填充了对象。

function createData(Estimate, ServiceProvider, Vehicle, Date, Amount, Status, Action) {
    return {Estimate, ServiceProvider, Vehicle, Date, Amount, Status, Action};
}
const rows = [
    createData('#10001', "Euro Motors", "2010 Toyota Corolla CE FWD", "January 28, 2021", "$395.11", "Approved",),
    createData('#10002', "Auto Motors", "Some car model", "January 28, 2021", "$395.11", "Pending"),
    createData('#10003', "Some other Motors", "Some other car model", "January 28, 2021", "$395.11", "Approved"),
]
const [tableData, setTableData] = useState(rows)

现在我只使用这个 ServiceProvider 的搜索功能

const requestSearch = (searchedVal) => {
    const filteredRows = rows.filter((row) => {
        return row.ServiceProvider.toLowerCase().includes(searchedVal.toLowerCase());
    });
    setTableData(filteredRows);
};

但我需要它用于 Estimate、ServiceProvider、Vehicle。如何将功能扩展到所有三个，以便无论用户在搜索栏中搜索什么，它都会检查所有三列并过滤掉重复的行。

Answer 1

只需添加条件 Estimate , 和 Vehicle并使用 || 组合它们requestSearch 内的运算符函数，像这样:

return row.ServiceProvider.toLowerCase().includes(searchedVal.toLowerCase()) ||
 row.Estimate.toLowerCase().includes(searchedVal.toLowerCase()) ||
 row.Vehicle.toLowerCase().includes(searchedVal.toLowerCase())