使用 ReactiveSearch 提交搜索查询

Question

我一直在使用 ReactiveSearch 构建搜索 UI。我想弄清楚如何提交实际的搜索查询。我一直在使用 DataSearch 组件，因为它内置了自动完成功能（只需将其设置为 true！）。自动完成工作正常。显示了建议，我可以 select 它们，但是当我 select 通过单击建议或按回车键时没有实际的搜索结果。

这是我的数据搜索

<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.

也许这与搜索查询无效有关？不确定。

Answer 1

onQueryChange 每当组件的查询更改时都会触发。在这里，您必须检查 onValueSelected 中的 cause，然后处理更新的查询。例如：

Demo

<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，您可以直接在 [=13= 中使用它].但是，如果值选择的原因是 SUGGESTION_SELECT，则查询必须在选择后更新。在这种情况下，我只是设置一个标志 this.valueSelected，以委托查询处理逻辑，然后在 onQueryChange.

中读取

简而言之，对于建议选择，流程从 onValueSelected 到 onQueryChange，对于其他原因（包括按回车键），我们已经有了来自 [=11= 的查询] 在 this.query 中，因此它在 onValueSelected 中得到处理。希望这有帮助。

至于发送搜索请求，不必使用 appbase-js，一个简单的 fetch 请求也可以。如果你使用 appbase-js 那么你可以使用 search 方法来简化 API docs.

使用 ReactiveSearch 提交搜索查询

Submitting a search query with ReactiveSearch

reactivesearch

说明