gpt4 book ai didi

javascript - 我如何过滤 Antd 中的列

转载 作者:行者123 更新时间:2023-12-04 04:23:02 25 4
gpt4 key购买 nike

我正在尝试根据输入过滤数组。但由于某种原因,这是行不通的......

我使用 React 并使用 Antd (Ant Design) 依赖项。 React 版本为 16.9.0,Antd 版本为 3.23.1。我使用 react Hook 来创建网站。

import React, { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import { Input, Icon, Button } from 'antd'
import Highlighter from 'react-highlight-words'
import { Button as ButtonCustom, message, HttpRequest, Icon as IconCustom, Table, Footer, Menu, formatDate, store } from '~/routes'

const Permission = props => {

const [permission, setPermission] = useState([])

const [searchText, setSearchText] = useState('')

const [searchInput, setSearchInput] = useState('')

const handleSearch = (selectedKeys, confirm) => {
confirm()
setSearchText(selectedKeys[0])
}

const handleReset = clearFilters => {
clearFilters()
setSearchText('')
}

const getColumnSearchProps = (dataIndex, name) => ({
filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
<div style={{ padding: 8 }}>
<Input
ref={node => { setSearchInput(node) }}
placeholder={`Buscar ${name}`}
value={selectedKeys[0]}
onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
onPressEnter={() => handleSearch(selectedKeys, confirm)}
style={{ width: 188, marginBottom: 8, display: 'block' }}
/>
<Button
type="primary"
onClick={() => handleSearch(selectedKeys, confirm)}
icon="search"
size="small"
style={{ width: 90, marginRight: 8 }}
>
Buscar
</Button>
<Button onClick={() => handleReset(clearFilters)} size="small" style={{ width: 90 }}>
Limpar
</Button>
</div>
),
filterIcon: filtered => (
<Icon type="search" style={{ color: filtered ? '#1890ff' : undefined }} />
),
onFilter: (value, record) =>
record[dataIndex]
.toString()
.toLowerCase()
.includes(value.toLowerCase()),
onFilterDropdownVisibleChange: visible => { if (visible) setTimeout(() => searchInput.select()) },
render: text => (
<Highlighter
highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
searchWords={[searchText]}
autoEscape
textToHighlight={text.toString()}
/>
)
})

useEffect(() => {
setPermission(store.getState().states.permissions)
}, [])

const returnInclusion = data => {
if (data) return 'Habilitado'
return 'Desabilitado'
}

const returnRead = data => {
if (data) return 'Habilitado'
return 'Desabilitado'
}

const returnModification = data => {
if (data) return 'Habilitado'
return 'Desabilitado'
}

const columns = [
{
title: 'Modulo',
dataIndex: 'module',
key: 'module'
},
{
title: 'Nome',
dataIndex: 'user',
key: 'user',
...getColumnSearchProps("user", "Usuário")
},
{
title: 'Inclusão',
dataIndex: 'inclusion',
key: 'inclusion',
filters: [
{
text: 'Habilitado',
value: 'Habilitado'
},
{
text: 'Desabilitado',
value: 'Desabilitado'
}
],
filterMultiple: false,
onFilter: (value, record) => record.inclusion.indexOf(value) === 0
},
{
title: 'Leitura',
dataIndex: 'read',
key: 'read',
filters: [
{
text: 'Habilitado',
value: 'Habilitado'
},
{
text: 'Desabilitado',
value: 'Desabilitado'
}
],
filterMultiple: false,
onFilter: (value, record) => record.read.indexOf(value) === 0
},
{
title: 'Modificação',
dataIndex: 'modification',
key: 'modification',
filters: [
{
text: 'Habilitado',
value: 'Habilitado'
},
{
text: 'Desabilitado',
value: 'Desabilitado'
}
],
filterMultiple: false,
onFilter: (value, record) => record.modification.indexOf(value) === 0
},
{
title: 'Ultima atualização',
key: 'datalog',
dataIndex: 'datalog'
},
{
title: 'Ação',
key: 'action',
dataIndex: 'icon'
}
]

return (
<>
<Menu />
<Table columns={columns}>
{
permission.map(data => (
{
key: data.ax_permissao_usuarioid,
user: data.ax_permissao_usuario_name,
module: data.ax_permissao_name_modulo,
// inclusion: (data.ax_permissao_inclusao ? "Habilitado" : "Desabilidado"),
inclusion: (returnInclusion(data.ax_permissao_inclusao)),
// read: (data.ax_permissao_leitura ? "Habilitado" : "Desabilidado"),
read: (returnRead(data.ax_permissao_leitura)),
// modification: (data.ax_permissao_modificacao ? "Habilitado" : "Desabilidado"),
modification: (returnModification(data.ax_permissao_modificacao)),
datalog: formatDate(data.ax_permissao_dataregistro),
icon: (
<span
title={`Editar permissão de ${data.ax_permissao_usuarioid}`}
onClick={() => localStorage.setItem("EditItem", data.ax_permissao_codmodulo)}
onKeyDown={() => localStorage.setItem('EditItem', data.ax_permissao_codmodulo)}
tabIndex="0"
role="menuitem"
>
<Link to="/updateuser" role="link">
<IconCustom type="edit" role="menuitem" />
</Link>
</span>
)
}))
}
</Table>
<ButtonCustom tipo="main" description="Criar uma nova Permissão" handle={() => props.history.push("/createpermission")}>
Cadastrar permissão
</ButtonCustom>
<Footer />
</>
)
}

export default Permission

我希望通过输入输入,它将只过滤那些具有指定名称的内容。但它显示错误:

error image

这是我想做的一个例子: Sample code that is working

最佳答案

您可能已经找到了解决方案,但希望这对其他人有帮助

我在对 antd 表使用钩子(Hook)时遇到了同样的问题。 this.searchInput 变量不应该是 React 状态的一部分,这就是它更新过于频繁的原因。使它成为一个简单的变量,像这样:

let searchInput = null;

...

<Input
ref={node => { searchInput = node }}
...
/>

...

这应该可以解决您的问题

关于javascript - 我如何过滤 Antd 中的列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58598353/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com