对象中的搜索功能 - React

Question

我正在尝试创建一个将在结果中显示的搜索功能，我尝试了不同的方法但不起作用。

  <Grid item xs={12} >
            <TextField
              label="Search Accounts"
              // value={searchQuery}
              // onChange={(e) => setSearchQuery(e.target.value)}
              fullWidth
              sx={{ mb: 2, width: '50%' }}
            />
            <Table>
              <TableHead>
                <TableRow>
                  <TableCell>Active</TableCell>
                  <TableCell>Edit</TableCell>
                  <TableCell>Account </TableCell>
                  <TableCell>Site Key</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {Object.entries(state.values.accounts).map(([accountKey, accountValue]) => {
                  const path = `values.accounts.${accountKey}`
                  return (
                    <TableRow key={path} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
                      <TableCell key={`${path}.active`}> <Switch name={`${path}.active`} onChange={onChangeSwitch} checked={accountValue.active} /> </TableCell>
                      <TableCell>
                        <IconButton sx={{ padding: 0 }} size="small" onClick={() => openModal({ account: accountKey, path })}>
                          <EditIcon />
                        </IconButton>
                      </TableCell>
                      <TableCell xs={12} > {accountValue.name} - {accountKey} </TableCell>
                      <TableCell >{accountValue.siteKey} </TableCell>
                    </TableRow>
                  )
                })}
              </TableBody>
            </Table>
          </Grid>

提前谢谢您。

我尝试使用过滤器，尝试创建一个新对象来获取过滤后的数据。

Answer 1

我不明白你想要实现什么，但根据我的猜测，你想在你的网站中为特定产品/项目创建一个搜索过滤器选项，所以这里有一个简短的

.filter

功能代码，可能会有所帮助给你..

const handleGlobalFilter = (e: any, searchText: string) => { // This is when onChange event occurs..
        setGlobalSearchList({
            ...globalSearchList,
            [e.target.id]: searchText,
        })
    }

useEffect(() => {
        if (localData) {
            if (Object.keys(globalSearchList).length > 0) {
                const response = localData.filter(function (item: any) {
                    return item['id'].toString().toLowerCase().includes(globalSearchList['globalSearch'].toString().toLowerCase()) ||
                        item['firstName'].toString().toLowerCase().includes(globalSearchList['globalSearch'].toString().toLowerCase()) ||
                        item['lastName'].toString().toLowerCase().includes(globalSearchList['globalSearch'].toString().toLowerCase()) ||
                        item['email'].toString().toLowerCase().includes(globalSearchList['globalSearch'].toString().toLowerCase())
                })
                setDisplayData(response)
            }
        }
    }, [globalSearchList]);