如何在react-querybuilder中使用API实现自动完成和多选？

Question

我正在使用react-querybuilder构建一个搜索查询构建器，并希望从API中获取某些规则的值。我还希望值字段成为一个过滤器，而不仅仅是一个下拉列表，用户可以在其中输入过滤字符串，结果将显示在下拉列表中。如果我们可以将结果设为多选，那么效果会更好，如添加的图像所示。 () 我研究了react-querybuilder，发现它没有我想要实现的功能。 如果社区中的任何人可以提供帮助，请联系我们。 谢谢

Answer 1

React Query Builder 的维护者在这里。您可以使用自定义值编辑器来实现此目的。我现在拥有的有关自定义组件的最佳文档是here。这将引导您使用

react-datepicker

创建日期的自定义值编辑器，但该概念对于任何其他 React 库都是相同的。

RQB 中没有内置的数据获取功能，因此您需要自己构建或使用库，但我会推荐

react-select

，因为它的多选和异步功能。

RQB 主页实际上有一个使用

react-select

的示例。组件本身的代码是这里，用法是这里。

如果您对 React Query Builder 有其他疑问，请随时在 GitHub 上提出问题/讨论或加入 Discord 聊天。