Reactjs 使用带有搜索字符串的全局过滤器时如何在 ReactTable 中进行精确匹配

下面是您如何重写global alFilter并进行"完全匹配".

如果首先只输入了一个"，而最后没有输入匹配，则忽略.

import React, { useMemo } from 'react'


import { useTable, useGlobalFilter } from 'react-table'

const COLUMNS = [
    { Header: 'id', accessor: 'id' },
    { Header: 'First name', accessor: 'first_name' },
    { Header: 'Last name', accessor: 'last_name' },
    { Header: 'Mail', accessor: 'email' },
    { Header: 'gender', accessor: 'gender' },
    { Header: 'age', accessor: 'age' },
    { Header: 'country', accessor: 'country' },
    { Header: 'Phone', accessor: 'phone' }
];
const MOCK_DATA =
[{"id":1,"first_name":"Abey","last_name":"Shattock","email":"ashattock0@who.int","gender":"male","age":60,"country":"Sweden","phone":"3235563967"},
{"id":2,"first_name":"Gert","last_name":"Verey","email":"gverey1@miitbeian.gov.cn","gender":"male","age":39,"country":"Argentina","phone":"6617228260"},
{"id":3,"first_name":"Elsa","last_name":"McDermott-Row","email":"gmcdermottrow2@fc2.com","gender":"female","age":73,"country":"China","phone":"5049019528"},
{"id":4,"first_name":"Ade","last_name":"Southwick","email":"asouthwick3@gmpg.org","gender":"male","age":58,"country":"France","phone":"2562514369"},
{"id":5,"first_name":"Angelina","last_name":"Almond","email":"aalmond4@ezinearticles.com","gender":"Female","age":30,"country":"Paraguay","phone":"9509201868"},
]

// Remove the value here in input else you get a warning
export const GlobalFilter = ({filter, setFilter}) => {
    return (
        <span>
            Search: {' '} 
            <input  onChange={(e) => setFilter(e.target.value)} />
        </span>
    )
}

export const BasicTable = () => {
   
    // You need to define your global filter here
    const globalFilter = React.useCallback((rows, ids, query) => {
        const searchTerm = String(query);

        return rows.filter((row) => {
            const matches = ids.filter((id) => {
                const rowValue = row.values[id];
                let searchTermLower = searchTerm.toLowerCase();

                if (searchTerm == '"')  {
                    // ignore first ' " ' handle it as no input
                    return true
                }
                else if (searchTerm.startsWith('"') && searchTerm.endsWith('"')) {
                    const exactSearchTerm = searchTerm.slice(1, -1);
                    return String(rowValue) === exactSearchTerm;
                }
                else if (searchTerm.startsWith('"'))  {
                    // ignore until ending ' " ' has been entered
                    searchTermLower = searchTerm.slice(1);
                }
   
                return rowValue !== undefined
                    ? String(rowValue).toLowerCase().includes(searchTermLower.toLowerCase())
                    : false;
            });

            return matches.length > 0;
        });
    }, []); 


   const columns = useMemo( () => COLUMNS, []);
   const data = useMemo( () => MOCK_DATA, []);

    const tableInstance = useTable({
            columns: columns,
            data: data,
            globalFilter: globalFilter // send it in here
        },
        useGlobalFilter
    )

    const { getTableProps, getTableBodyProps, prepareRow, setGlobalFilter, headerGroups, rows } = tableInstance

    return (
        <div>
            <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter}/>
            <table { ...getTableProps() }>
                <thead>
                    {
                        headerGroups.map( (headerGroup) => (
                            <tr {...headerGroup.getHeaderGroupProps()}>
                                {
                                    headerGroup.headers.map(( column ) => (
                                        <th {...column.getHeaderProps()}>{column.render('Header')}</th>
                                    ))
                                }
                            </tr>
                        ))
                    }
                </thead>
                <tbody { ...getTableBodyProps() }>
                    
                        {rows.map( (row) => {
                            prepareRow(row)
                            return (
                                <tr {...row.getRowProps()}>
                                    {
                                        row.cells.map((cell) => {
                                            return <td {...cell.getCellProps()}> {cell.render('Cell')}</td>
                                        })
                                    }
                                </tr>
                            )
                        })
                        }

                </tbody>
            </table>
        </div>
    )
}