javascript - 如何在 React 中为 JSON 数据表创建搜索过滤器？

Question

我一直在尝试通过按数据头的值过滤数据来实现 JSON 数据表的搜索过滤器......

这是输入字段

 <input type= "text" placeholder="Search..." value={search} onChange={(e) => 
 {setSearch(e.target.value)}} />

下面是数据表..

<table cellSpacing="40" cellPadding="20" >
            <thead>
                <tr>
                <th>#ID</th>
                <th>Name</th>
                <th>Gender</th>
                <th>LGA</th>
                <th>WARD</th>
                </tr>
            </thead>
            <tbody>
    {person.map(record =>(
        <tr key = {record.id}>
        <td>{record.id}</td>
        <td> <Link to={`/beneficiary/${record.full_name}`} >
         {record.full_name}</Link></td>
         <td>{record.gender}</td>
         <td>{record.lga}</td>
         <td> {record.ward} </td>
        </tr>     
    ))}
    
</tbody>
</table>
    
}

我如何用数据表包装输入字段，以便能够通过数据头的值获取数据。说，性别的标题..我想得到男性的结果。等等

标签： javascriptreactjs

Answer 1

只需先过滤数据

       {person.filter((e) => ['name', 'descr']
       .some((property)=> e[property].toLowerCase()
       .includes(search.toLowerCase())))
       .map(record =>(
            <tr key = {record.id}>
            <td>{record.id}</td>
            <td> <Link to={`/beneficiary/${record.full_name}`} >
             {record.full_name}</Link></td>
             <td>{record.gender}</td>
             <td>{record.lga}</td>
             <td> {record.ward} </td>
            </tr>     
        ))}