反应材料-UI列搜索选择 [英] React Material-UI Column Search Selection

问题描述

我当前使用的是Material-UI数据表，有一个类似于Codesandbox example的搜索例程，该例程仅对Name/Food列进行搜索。

我当前的代码如下：

const [filterFn, setFilterFn] = useState({ fn: items => { return items; } })

const handleSearch = e => {
    let target = e.target;
    setInput(target.value)
    setFilterFn({
        fn: items => {
            if (target.value == "")
                return items;
            else                    
                return items.filter(x => x.name.toLowerCase().includes(target.value))
        }
    })
}

在我当前的搜索输入中，我调用handleSearch，如下所示：

            <Controls.Input
                id="name"
                label="Search Name"
                value={input}
                autoFocus={true}
                className={classes.searchInput}
                InputProps={{
                    startAdornment: (<InputAdornment position="start">
                        <Search />
                </InputAdornment>)
                }}
                onChange={handleSearch}
            />

这样，我现在需要一种方法来搜索此数据表中的任何列，即Calories、Carbs或Protein，而不仅仅是Food。

我在考虑向用户展示所有可用列的下拉选择列表，然后能够使用该列执行他们的搜索，但不确定如何作为Material-UI的新功能来实现这一点。

有没有人可以帮助我实现这一点，或者可能向我指出仍在使用Material-UI的示例或其他软件包，因为它们非常希望实现这一点。

推荐答案

这里有类似的案例。 Material-UI XGrid multiple select with checkbox 'select all rows checkbox' to select filtered rows only?

如果您可以查看applyFilter函数，那么我非常肯定您可以通过比较键循环内的searchedVal来实现您想要的功能。

这是个好主意。

所以在您的情况下，我希望这样编码。

const requestSearch = (originalRows: [], searchedVal: string): [] => {
  return originalRows.filter((row) => {
    let matches = true;

    if (searchedVal) {
      const properties = ['Name', 'Calories', 'Carbs', 'Protein'];
      // include keys what you want to search

      let containsVal = false;

      properties.forEach((property) => {
        if (originalRows[property].toLowerCase().includes(searchedVal.toLowerCase())) {
          containsVal = true;
        }
      });

      if (!containsVal) {
        matches = false;
      }
    }

    return matches;
  });
};

我相信这对于Material-UI来说并不棘手，只是JavaScript中的一个搜索功能。

这篇关于反应材料-UI列搜索选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！