javascript - 如何在反应表上呈现列过滤器时传递回调

Question

我对 react 和 react-table 很陌生，以前我在客户端过滤上成功运行了以下代码，现在我正在尝试将其更新为服务器端过滤。我的代码如下所示：

const ServerSideTable = ({ columns, data, tableMeta, fetchData }) => {
    const defaultColumn = React.useMemo(() => {
        return {
            Filter: ColumnFilter,
        };
    }, []);

    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        // rows,
        prepareRow,
        state,
        setGlobalFilter,
        page,
    } = useTable(
        {
            columns,
            data,
            defaultColumn,
            manualPagination: true,
            pageCount: tableMeta.totalPage,
        },
        useFilters,
        useGlobalFilter,
        useSortBy,
        usePagination
    );

    <table
        {...getTableProps()}
        id="basicTable"
    >
        <thead>
            {headerGroups.map((headerGroup) => (
                <tr {...headerGroup.getHeaderGroupProps()}>
                    {headerGroup.headers.map((column) => (
                        <th
                            {...column.getHeaderProps()}
                            className="align-top"
                        >
                            <div
                                {...column.getSortByToggleProps()}
                            >
                                {column.render("Header")}
                            </div>
                            <div>
                                {column.canFilter
                                    ? column.render(
                                          "Filter"
                                      )
                                    : ""}
                            </div>
                        </th>
                    ))}
                </tr>
            ))}
        </thead>

    </table>
}

看起来ColumnFilter像

const ColumnFilter = ({ column }) => {
    const { filterValue, setFilter } = column;
    const [value, setValue] = useState(filterValue);

    const onChange = useAsyncDebounce((value) => {
        setFilter(value || undefined);
    }, 1000);

    return (
        <input
            type="search"
            className="form-control form-control-sm d-inline-block"
            placeholder=""
            aria-controls="datatable"
            value={value || ""}
            onChange={(e) => {
                setValue(e.target.value);
                onChange(e.target.value);
            }}
        />
    );
};

我在这里想要的是handleSearchquuery回调const ColumnFilter = ({ column, handleSearchQuery }) => {

这样我就可以调用回调而不是setFilter调用onChange。

目前，这个过滤器被渲染为：

{column.canFilter
    ? column.render(
          "Filter"
      )
    : ""}

看起来这是相关文档，但无法理解。

https://react-table.tanstack.com/docs/api/useFilters#column-options