如何将异步数据源用于blueprint.js Select组件?

时间:2019-05-19 11:28:20

标签: typescript asynchronous blueprintjs

过滤项目的官方方法是itemListPredicate事件处理程序。它记录在这里:

https://blueprintjs.com/docs/#select/select-component.querying

问题是itemListPredicate具有以下签名:

export declare type ItemListPredicate<T> = (query: string, items: T[]) => T[];

如您所见,它希望能够立即从固定的现有项目列表中过滤掉某些项目。不能用于大型数据集。我需要将查询发送到服务器,等待答案,然后返回(可能是新的)项目。但这不能通过上述处理程序完成,因为它不是异步的。

我试图解决:

*在调用itemListPredicate时将更改后的查询保存在本地状态 *通过去抖动的异步方法向服务器发送查询,并等待答案 *在服务器发回响应后,更改items组件的Select属性

但这也不起作用。更改items属性将自动关闭Popover,因此不能用于实时搜索。

我还可以为此使用其他组件(例如React-Select),但是我想将解决方案与blueprintjs Select结合使用-只是因为它是blueprintjs库的一部分并与之无缝集成。 (例如大小,主题,图标,意图等)。

如何正确执行此操作?

更新:我发现我错了。设置道具道具不会关闭Popover。我不小心设置了导致重新渲染整个Select的其他内容。所以我的想法可行。我不会删除此帖子,因为可能有人需要它。我将在稍后(测试后)发布整个解决方案。

0 个答案:

没有答案