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

查看:30
本文介绍了反应材料-UI列搜索选择的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我当前使用的是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}
            />

这样,我现在需要一种方法来搜索此数据表中的任何列,即CaloriesCarbsProtein,而不仅仅是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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆