如何在反应表上渲染列过滤器时传递回调

问题描述

我对 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,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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）