Question

我有以下用于ant设计自动完成功能的处理程序，但是尽管状态在React中设置正确，但自动完成功能会显示其他值，而不是仅显示已过滤的值。

handleSearch(value) {
        api.getUsers()
        .then(users => users.map(p => p.userName.trim()))
        .then(users => users.filter(name => name.startsWith(value)))
        .then(function (names) {
            console.log(names);
            this.setState(function () {
                return {
                    dataSource: !names ? [] : names
                }
            })
        }
            .bind(this));
}

自动完成功能是：

render() {
    const {dataSource} = this.state;
    return (
        <div>
            <div><h1>User Search</h1></div>


            Username :
            <AutoComplete
                dataSource={dataSource}
                style={{width: 200}}
                onSelect={onSelect}
                onSearch={this.handleSearch}
                placeholder="input here"
            />
        </div>
    );
}

Answer 1

在使用异步服务器端查找提供自动完成结果时，我遇到了同样的问题。如果dataSource在更改输入后进行了更新，则AutoComplete将不会更新菜单，因为由于未更改输入，因此看不到需要重新渲染的菜单。

我通过从onChange( value )设置状态道具并将显式自动完成的value设置为此状态道具来解决此问题。这将导致结果下拉列表更新。

如何为Ant Design自动完成功能过滤值？

1 个答案: