是否有一种方法或道具可以消除 table 的主要搜索？

Question

大家好，我想使用去抖动方法进行服务器端搜索，当我为 table 创建一个 ref 并记录它时，我发现了这个方法 onSearchChangeDebounce 但我不知道如何使用它，我将不胜感激任何想法。这是我的代码

<MaterialTable
    tableRef={ref => this.tableRef = ref}
    title={title}
    data={data}
    isLoading={store.loading}
    options={this.options}
    actions={this.actions}
    localization={this.localization}
    columns={this.columns}
    components={this.components}
    icons={this.icons}
    detailPanel={this.rowDetailsPanel}
    onChangeRowsPerPage={pageSize => this.handleChangePageSize(pageSize)}
    onSearchChange={data => this.handleServerSideSearch(data)}
/>

handleServerSideSearch(dataToSearch) {
    console.log(dataToSearch);
    // call api here after debounce
}

提前致谢。

Answer 1

您可以在选项中使用 debounceInterval 属性设置去抖动间隔，如下所示：

<MaterialTable
    tableRef={ref => this.tableRef = ref}
    title={title}
    data={data}
    isLoading={store.loading}
    options={{...this.options, debounceInterval: 1000}}
    actions={this.actions}
    localization={this.localization}
    columns={this.columns}
    components={this.components}
    icons={this.icons}
    detailPanel={this.rowDetailsPanel}
    onChangeRowsPerPage={pageSize => this.handleChangePageSize(pageSize)}
    onSearchChange={data => this.handleServerSideSearch(data)}
/>

handleServerSideSearch(dataToSearch) {
    console.log(dataToSearch);
    // call api here after debounce
}

这将在最后一次用户搜索交互后 1 秒调用 handleServerSideSearch。

是否有一种方法或道具可以消除 table 的主要搜索？

Is there is a method or prop to debounce the main search of the table?

material-table