0

我有一个 Datatable 设置，就像这里显示的默认值一样。我想让搜索栏过滤与其所在位置分离的数据，并将其放在完全不同的地方。因此，我希望使用自己的输入字段以与当前默认输入字段完全相同的方式搜索数据。

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

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}
/>

当前所做的是您可以在我的自定义输入字段中输入，但您必须打开默认搜索字段，并且当您在其中输入时，它会使用我的自定义搜索文本。所以在某种程度上我让它使用自定义搜索进行搜索。我希望它像在gif中一样工作。

抱歉，如果这是菜鸟，但我使用 React 的时间不长。

谢谢

4

1 回答 1

1

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

于 2019-06-13T06:57:03.053 回答