如何在不关闭输入框的情况下，在Change上搜索antd表，并进行确认。

Question

AntD有几个例子来说明如何使用他们的事件处理程序来搜索一个表，但是他们使用了确认和重置的按钮，这在我的上下文中太笨重了。 我需要能够在变化时进行搜索，这样当他们删除过滤器时，就会删除搜索。 我已经修改了示例，删除了按钮，并添加了 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',
    },
];

Handlers:

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

Render:

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

EDIT: 截图显示了没有确认方法的行为。 Sidney应该消失了。

Answer 1

没有问题

去掉 confirm(); 从 handleSearch 功能，然后搜索工作不关闭搜索下拉。

编辑。

为了达到这个目的，你应该自己处理数据过滤。 创建状态变量。filteredData 和 isFiltered 并手动过滤数据。