React Material-UI列搜索选择

Question

我目前正在使用Material-UI数据表，并有一个类似于这个Codesandbox示例的搜索例程，它只是在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的软件包，因为它们热衷于实现这一点。

Answer 1

下面是类似的情况。材质- ui XGrid多重选择与checkbox'仅选择已筛选的行?

如果你可以通过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中的一个搜索函数。