React 数据表的自定义搜索框

Question

我设置了一个数据表，就像显示的默认设置一样 here。我想让搜索栏过滤数据，使其脱离原来的位置，并将其放在完全不同的地方。所以我想使用自己的输入字段来按照当前默认输入字段的确切方式搜索数据。

这是我的代码和我目前的进度...

state = {
    searchValue: ''
}

const data = [
    ["Gabby", "Data 1", "Pending", "15/01/19", "0,000"],
    ..........];

let options = {
    .....
    customSearch: (searchQuery, currentRow, columns) => {
        let isFound = false;
        currentRow.forEach(col => {
            if (col.toString().indexOf(this.state.searchValue) >= 0) {
                isFound = true;
            }
        });
    return isFound;
    }
};
.....
<input
    type="text"
    value={this.state.searchValue}
    onChange={(e, value) => this.handleSearchChange(e, value)}
/>
......
<MUIDataTable
    title={"My Title"}
    data={data}
    columns={columns}
    options={options}
/>

目前您可以在我的自定义输入字段中输入内容，但您必须打开默认搜索字段，当您在其中输入时，它会使用我的自定义搜索文本。所以在某种程度上，我让它使用自定义搜索进行搜索。我希望它像在 the gif.

中一样工作

对不起，如果这是菜鸟，但我使用 React 的时间并不长。

谢谢

Answer 1

我是如此接近。我只需要在 customSearch 上方添加 searchText: this.state.searchValue, 并将 if (col.toString().indexOf(this.state.searchValue) >= 0) { 更改为 if (col.toString().indexOf(searchQuery) >= 0) {.

React 数据表的自定义搜索框

Custom Search box for React Datatables

search

datatables

reactjs

reactify