reactivesearch - 使用 ReactiveSearch 提交搜索查询
问题描述
我一直在使用 ReactiveSearch 构建搜索 UI。我试图弄清楚如何提交实际的搜索查询。我一直在使用 DataSearch 组件,因为它内置了自动完成功能(只需将其设置为 true!)。自动完成工作正常。显示了建议,我可以选择它们,但是当我通过单击或按 Enter 选择建议时,没有实际的搜索结果。
这是我的数据搜索
<DataSearch
placeholder="Search..."
componentId="q"
dataField={["firstname"]}
queryFormat="or"
className="navbar-search-box"
icon={(<i className="fa fa-search fa-lg" style={searchIcon}></i>)}
showIcon={true}
iconPosition="right"
URLParams={true}
innerClass={{
title: "text-title",
input: "text-input",
list: "text-item"
}}
react = {{
"or": ["q"]
}}
onValueSelected={(value, cause, source) => {
this.setState({redirect:true});
}
}
onQueryChange = {
(prevQuery, nextQuery) => {
console.log('prevQuery', prevQuery);
console.log('nextQuery', nextQuery);
}
}
...
我假设我不需要使用他们的 appbase-js 库来向 ES 提交全文搜索查询。我假设只要您为dataField
属性分配了一个值,DataSearch 组件就会将查询放在一起。
当我尝试提交查询时,我也会收到此错误:
Warning: Each child in an array or iterator should have a unique "key" prop.
也许这与搜索查询不起作用有关?没有把握。
解决方案
onQueryChange
每当组件的查询更改时都会触发。在这里,您必须签入cause
,onValueSelected
然后处理更新的查询。例如:
<DataSearch
...
onValueSelected={(value, cause, source) => {
if (cause !== 'SUGGESTION_SELECT') {
// use this.query
console.log('use', this.query);
this.setState({
redirect: true
});
} else {
this.valueSelected = true;
}
}}
onQueryChange={(prevQuery, nextQuery) => {
this.query = nextQuery;
if(this.valueSelected) {
// use this.query
console.log('use', this.query);
this.valueSelected = false;
this.setState({
redirect: true
});
}
}}
/>
解释
当值选择的原因不是建议选择时(即它可能是输入键),那么onQueryChange
您this.query
可以直接在onValueSelected
. 但是,如果值选择的原因是SUGGESTION_SELECT
,则查询必须在选择后更新。在这种情况下,我只是设置一个标志this.valueSelected
,以委托查询处理逻辑,然后将其读入onQueryChange
.
简而言之,对于建议选择,流程从onValueSelected
toonQueryChange
和其他原因(包括按 enter 键),我们已经有来自onQueryChange
in的查询this.query
,因此它在 中处理onValueSelected
。希望这可以帮助。
至于发送搜索请求不需要使用appbase-js
,一个简单的fetch
请求也可以。如果您正在使用,appbase-js
那么您可以使用该search
方法来简化 API文档。
推荐阅读
- stata - 使用 xtpoisson 和 xtnbreg 时如何测试 STATA 中的过度分散?
- python - Plotly:如何显示和过滤具有多个下拉列表的数据框?
- postgresql - Postgres Dockerfile 探索 - VOLUME 语句使用
- asp.net-core - 具有 @Body 和更多属性的 Blazor WASM LayoutComponentBase
- c++ - make 'new GlobalVariable' 时参数是什么意思?在“llvm FunctionPass”中
- kotlin - 为什么延迟使协同程序可以取消
- javascript - Angular 9 中的条件绑定属性 fxFlex
- probability - 从离散联合概率分布计算边际分布
- c# - 有没有办法打开不是模态的文件属性窗口?
- java - SpringBoot - Java AWS SDK 2 DynamoDB 增强客户端和开发工具问题