使用ReactiveSearch提交搜索查询

Question

我一直在用ReactiveSearch构建一个搜索UI。我正在努力弄清楚如何提交实际的搜索查询。我一直在使用DataSearch组件，因为它附带了自动完成功能(只需将其设置为true!)。自动完成功能很好。建议显示，我可以选择他们，但没有实际的搜索结果，当我选择一个建议，点击它或按回车。

这是我的DataSearch

<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提交全文搜索查询。我假设DataSearch组件将查询放在一起，只要您为dataField属性分配了一个值。

当我试图提交一个查询时，我也会得到这个错误：

Warning: Each child in an array or iterator should have a unique "key" prop.

也许这与搜索查询不起作用有关？不确定。

Answer 1

在查询更改组件的任何时候都会触发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到onQueryChange，由于其他原因(包括按enter键)，我们已经在this.query中使用了来自onQueryChange的查询，因此它将在onValueSelected中得到处理。希望这能有所帮助。

至于发送搜索请求(使用appbase-js并不需要)，一个简单的fetch请求也可以工作。如果您使用的是appbase-js，那么您可以使用search方法来简化API 文档。