我如何过滤 Antd 中的列

Question

I am trying to filter an array according to an input. But for some reason this is not working...

I use React and use the Antd (Ant Design) dependency. React version is 16.9.0 and Antd version is 3.23.1. I use the reaction hooks to create the site.

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

I hope that by typing in input it will filter only those that have the specified name. But it shows the error:

error image

This is an example of what I would like to do: Sample code that is working

Answer 1

You've probably found a solution already, but hopefully this will help someone else

I had this same issue with using hooks with antd tables. The this.searchInput variable is not supposed to be part of React state, that's why it updates too frequently. Make it a simple variable, like this:

let searchInput = null;

...

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

...

That should fix your issues