如何從選擇 onChange 向數組添加過濾器

Question

我正在嘗試更新數組以從中過濾一列。 這個想法是在我開始工作后使用多個額外的選擇/文本字段。 我正在努力的是在哪里以及如何添加它，以便可以獲得一個值來更新下面的數組。

模態/過濾器顯示

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>);
}

搜索文本字段

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>
    );
}

在這里，我嘗試創建一些東西來返回數組，以便我可以將 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);
  });
  }
};

其余的代碼都放在一起。 這是我將使用modalfilterData的地方，以便我可以使用來自選擇的值更新 tableData。 我該如何以及如何繼續，以便我可以獲得選擇值並可能擴大它以添加多個類似的選擇元素？

...
export default function CollapsibleTable() {

  ...
  const rows = tableData;
  ...

  //.    
  //apply filter from select value using `modalfilterData`
  //.

  return (
            <SearchBar searchQuery={searchQuery} setSearchQuery={setSearchQuery} />

            <DisplayFilter 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
    } 
]

getUnique 的實現

function getUnique(array,headeritem){
    const unique = [...new Set(array.map(item => item[headeritem]))]
    return Array.from(unique);
}

Answer 1

要從CollapsibleTable組件中的DisplayFilter組件中獲取Source select 的值，您必須像在SearchBar組件中那樣提升狀態。