Question

我已经建立了一个数据表，类似于默认显示的here。我想使用搜索栏来过滤从其所在位置分离的数据，并将其放置在完全不同的位置。因此，我想拥有一个自己的输入字段，用于以当前默认值的确切方式搜索数据。

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

state = {
    searchValue: ''
}

const data = [
    ["Gabby", "Data 1", "Pending", "15/01/19", "$100,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

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

React Datatables的自定义搜索框

1 个答案: