ReactiveSearch 仅自动完成答案

【问题标题】：ReactiveSearch only autocompleteReactiveSearch 仅自动完成
【发布时间】：2018-05-08 07:30:56
【问题描述】：

我只想将 ReactiveSearch 库用于自动完成提交。

const Search = () => (
  <div className="search-field">
    <ReactiveBase
      app="good-books-ds"
      credentials="nY6NNTZZ6:27b76b9f-18ea-456c-bc5e-3a5263ebc63d"
    >
      <div className="row">
        <div className="col">
          <DataSearch
            dataField={['original_title', 'original_title.search']}
            categoryField="authors.raw"
            componentId="BookSensor"
          />
        </div>
      </div>
    </ReactiveBase>
  </div>
)

export default Search

我尝试使用<DataSearch ... /> 进行上述输入，它可以工作，但它没有提交选项。我试图用表单包装它，但是在输入或选择值后它不会触发。

有什么建议吗？

【问题讨论】：

标签： reactjs elasticsearch reactivesearch

【解决方案1】：

https://opensource.appbase.io/reactive-manual/search-components/datasearch.html

您需要仔细阅读文档，这里有onValueChange 处理程序，因此当您输入内容时，您可以先设置状态，然后在顶部设置初始状态state = {searchText: ""}，然后在数据搜索道具中您可以执行以下操作

<DataSearch onValueChange = {(e) => this.setState({searchText: value})} />

现在让您拥有自己的按钮并提交状态中的值，例如this.state.searchText

【讨论】：

是的，我现在是带有按钮提交的解决方案，但我希望它在没有额外按钮的情况下工作 - 只需按 Enter。
还有onKeyDown，你可以检查keyCode是否等于输入，然后通过调用函数发送你的请求
好的，这将解决按 Enter 的问题。通过鼠标单击从下拉列表中选择的值怎么样
您可能希望在用户更改查询时利用 onQueryChange，并且您可以触发某种函数调用 btw onQueryChange 有两个参数 prevQuery 和 nextQuery 示例在文档中我不确定这会解决你的问题，但没有 onClick 处理程序
onValueChange 将始终为您提供当前值，即使它是从建议中选择的。因此，您可以使用此值更新您的本地状态并使用onQueryChange 调用您的提交方法（也可以省去添加按键事件的麻烦）。如果不清楚，我可以添加答案。

【解决方案2】：

ReactiveSearch 现在支持 onValueSelected 属性，非常适合您只对使用所选值感兴趣（选择建议或按 Enter 键）的用例。 Docs 及用法示例：

<DataSearch
  ...
  onValueSelected={(value) => console.log('The selected value is', value)}
/>

【讨论】：