代码之家 › 专栏 › 技术社区 › Mohammed Saber

是否有一种方法或道具可以抵消表格的主要搜索?

material-table

1

Mohammed Saber · 技术社区 · 4 年前

大家好,我想使用debounce方法进行服务器端搜索,当我创建一个 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
}

提前感谢。

0 回复 | 直到 4 年前

1

halfer Rajnish Kumar 4 年前

您可以使用 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
}

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