[英]How do I add a filter to the array from a select onChange
I am trying to get the array to be updated to filter a column from it.我正在尝试更新数组以从中过滤一列。 The idea is to use multiple additional select/TextFields once I get one working.
这个想法是在我开始工作后使用多个额外的选择/文本字段。 What I am struggling with is where and how to add it, so that a value can be obtained to update the array below.
我正在努力的是在哪里以及如何添加它,以便可以获得一个值来更新下面的数组。
The Modal/Filter Display模态/过滤器显示
function DisplayFilter(data){
const [open, setOpen] = React.useState(false);
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);
const [source, getSource] = React.useState('');
const handleChange = (event) => {getSource(event.target.value)}
return (
<div>
<Stack spacing={2} direction="row">
<Button onClick={handleOpen} type="submit" variant="contained" size="small" style={{ height: "40px", backgroundColor: 'purple' }} className="mleft1">
Filter
<FilterListIcon style={{ fill: "white" }} />
</Button>
</Stack>
<Modal
open={open}
onClose={handleClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box sx={modalFilterStyle}>
<div>
<Box sx={{ minWidth: 120, margin: 2 }}>
<FormControl fullWidth>
<InputLabel id="source-label">Source</InputLabel>
<Select
labelId="source-label"
id="source-label-select"
value={source}
label="Source"
onChange={handleChange}
>
<MenuItem key={makeUniqueKey()} value="">
Alle
</MenuItem>
{getUnique(data.data,'source')?.map(option => {
return (
<MenuItem key={makeUniqueKey()} value={option}>
{option}
</MenuItem>
);
})}
</Select>
</FormControl>
</Box>
</div>
</Box>
</Modal>
</div>);
}
Search TextField搜索文本字段
function SearchBar ({setSearchQuery}){
return (
<form>
<IconButton type="submit" aria-label="search">
<SearchIcon style={{ fill: "purple" }} />
</IconButton>
<TextField
id="search-bar"
onChange={(e) => {
setSearchQuery(e.target.value);
}}
variant="outlined"
placeholder="Suche..."
size="small"
/>
</form>
);
}
Here I tried to create something to return the array, so that I can pass the value of a select to query在这里,我尝试创建一些东西来返回数组,以便我可以将 select 的值传递给查询
const modalfilterData = (query, data, headeritem) => {
if (!query) {
return data;
} else {
return data = data.filter((item) => {
return Object.keys(item).some(key => item[headeritem].toString().toLowerCase().search(query.toLowerCase()) !== -1);
});
}
};
The rest of the code where everything comes together.其余的代码都放在一起。 This is where I would use
modalfilterData
so that I can update the tableData with the value from the select.这是我将使用
modalfilterData
的地方,以便我可以使用来自选择的值更新 tableData。 What and how can I proceed, so that I can obtain the select value and possibly scale this up to add multiple similar select elements ?我该如何以及如何继续,以便我可以获得选择值并可能扩大它以添加多个类似的选择元素?
...
export default function CollapsibleTable() {
...
const rows = tableData;
...
//.
//apply filter from select value using `modalfilterData`
//.
return (
<SearchBar searchQuery={searchQuery} setSearchQuery={setSearchQuery} />
<DisplayFilter data={tableData} />
);
}
Sample Data : tableData样本数据:tableData
[
{
"id": 2097190,
"date": 1652965848416,
"client": 49372,
"level": 2,
"source": 3,
"status": 0
},
{
"id": 2097185,
"date": 1652965848761,
"client": 49372,
"level": 2,
"source": 3,
"status": 0
}
]
Implementation of getUnique getUnique 的实现
function getUnique(array,headeritem){
const unique = [...new Set(array.map(item => item[headeritem]))]
return Array.from(unique);
}
要从CollapsibleTable
组件中的DisplayFilter
组件中获取Source
select 的值,您必须像在SearchBar
组件中那样提升状态。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.