Question

我正在尝试实现自定义列过滤逻辑来循环数组并对每个值运行包含检查。如果找到该值，它将返回true，并允许显示该行。 lib [react-bootstrap-table2]为此包含一个钩子，但似乎仅在某些情况下有效。不知道是由于我的代码还是库的限制。

当前，我正在为列使用动态生成。数据从服务器中拉出，填充到表中，然后用户可以在某个时候将列过滤器切换为启用以使其显示。此时，我将使用

生成列过滤器

 column.filter = textFilter({
                onFilter: (filterVal, columnKey) => this.onFilter(filterVal)
            })

onFilter映射到以下方法

 onFilter(filterVal, key) {
        //Multi-search
        if(filterVal.startsWith('in:') && filterVal.indexOf(",") !== -1) {
            //Remove first 3 chars (in:) and split by ","
            var searchTerms = filterVal.substring(3).split(",");

            this.props.filter(function(row) { return stringContainsAny(row[key], searchTerms)});
        }
        //Normal string check
        else {
            this.props.filter(row => row[key].indexOf(filterVal) !== -1);
        }
}

正常的字符串检查工作正常，但是即使我可以验证它是否被调用，多重选择也不起作用。同样，它对于某些给定的行将返回true。如果需要，下面是包含函数的字符串。

//Searches a word for anything contained in the array
export function stringContainsAny(stringToSearch, arrayOfSearchTerms) 
{
    var i;
    for(i = 0; i < arrayOfSearchTerms.length; i++) {
        var term = arrayOfSearchTerms[i].trim();
        //Ignore empty
        if(term != '' && stringToSearch.indexOf(term) != -1) {
           return true;
        }
    }
    return false;
}

Storybook页面，了解react-bootstrap-table2的示例。通过将其onFilter替换为我的onFilter版本，可用于生成最低工作版本。

https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Column%20Filter&selectedStory=Implement%20custom%20filter%20logic&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel

编辑：使用故事书https://codesandbox.io/s/blissful-pine-994mb

的最小示例

使用我的代码的最小工作示例 https://codesandbox.io/s/cranky-cookies-kpl1b

React-Bootstrap-Table2使用循环的自定义列过滤器逻辑？

0 个答案: