如何在不关闭输入框的情况下搜索antd表onChange

Question

AntD 有几个例子来说明如何使用他们的事件处理程序搜索一个表，但是他们使用按钮来确认和重置，这在我的上下文中太笨重了。我需要能够搜索 onchange，以便当他们删除过滤器时，它会删除搜索。我已更改示例以删除按钮，并将 handleSearch 处理程序添加到 onChange 侦听器。

然而。

这个愚蠢的confirm 函数在任何地方都没有定义，每次击键都会关闭搜索对话框。如果我将其注释掉，它实际上不会过滤表格。如果我把它留在里面，我一次只能搜索一个字母。

如何修改我的代码，以便在更改时过滤列，但保留搜索输入以供进一步输入？

数据：

const data = [
    {
        key: '1',
        name: 'John Brown',
        age: 32,
        address: 'New York No. 1 Lake Park',
    },
    {
        key: '2',
        name: 'Joe Black',
        age: 42,
        address: 'London No. 1 Lake Park',
    },
    {
        key: '3',
        name: 'Jim Green',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
    },
    {
        key: '4',
        name: 'Jim Red',
        age: 32,
        address: 'London No. 2 Lake Park',
    },
];

处理程序：

constructor(props) {
    super(props);
    this.state = {
        searchText: '',
        searchedColumn: '',
    };
}

handleSearch = (selectedKeys, confirm, dataIndex) => {
    **confirm();//This function is not defined in code anywhere where I can edit.**
    this.setState({
        searchText: selectedKeys[0],
        searchedColumn: dataIndex,
    });
};

getColumnSearchProps = dataIndex => ({
    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm }) => (
        <div style={{ padding: 8 }}>
            <Input
                ref={node => {
                    this.searchInput = node;
                }}
                placeholder={`Search ${dataIndex}`}
                value={selectedKeys[0]}
                onChange={e => {
                    setSelectedKeys(e.target.value ? [e.target.value] : []);
                    this.handleSearch(selectedKeys, confirm, dataIndex);
                }
                }
                style={{ width: 188, marginBottom: 8, display: 'block' }}
            />
        </div>
    ),
    filterIcon: filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
    onFilter: (value, record) =>
        record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()),
    onFilterDropdownVisibleChange: visible => {
        if (visible) {
            setTimeout(() => this.searchInput.select());
        }
    },
    render: text =>
        this.state.searchedColumn === dataIndex ? (
            <Highlighter
                highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
                searchWords={[this.state.searchText]}
                autoEscape
                textToHighlight={text.toString()}
            />
        ) : (
                text
            ),
});

渲染：

    const columns = [
        {
            title: 'Name',
            dataIndex: 'name',
            key: 'name',
            width: '30%',
            ...this.getColumnSearchProps('name'),
        },
        {
            title: 'Age',
            dataIndex: 'age',
            key: 'age',
            width: '20%',
            ...this.getColumnSearchProps('age'),
        },
        {
            title: 'Address',
            dataIndex: 'address',
            key: 'address',
            ...this.getColumnSearchProps('address'),
        },
    ];

return (
        <Table columns={columns} dataSource={data} />
        );

编辑：屏幕截图显示没有确认方法的行为。西德尼应该消失。

Answer 1

这真的很简单。 只需进行以下更改：

confirm()   
↓
confirm({ closeDropdown: false })

通过这样做，您将能够覆盖 antd/lib/table lib 中的 filterDropdown 接口道具，其中控制该函数的行为。

Answer 2

没问题

从handleSearch 函数中删除confirm();，然后在不关闭搜索下拉菜单的情况下进行搜索。

编辑：

要实现这一点，您应该自己处理数据过滤。创建状态变量filteredData 和isFiltered 并手动过滤数据。