1

我已经按照 ReactiveSearch 的教程进行操作，并且我将它与 React 和 Appbase.io 上的托管 Elastic 实例一起使用。我目前有一个自动完成的搜索框，如下面的 CodeSandbox 所示。

我正在尝试这样做，以便 onValueSelected 行为可以引用 dataField 中的值。例如，如果您键入一个值，代码将引导您到 document.location.href = './${name}'

想象一下输入“ap”，按回车键并被带到“/apple”，因为这是第一个结果。我找不到任何有关在 onValueSelected 代码中引用“名称”的信息。

CodeSandbox 链接：https ://codesandbox.io/embed/wqjpoq25w

<DataSearch
 className=""
 autosuggest={true}
 strictSelection={true}
 componentId="search"
 placeholder="Search Name/Ticker"
 dataField={["symbol", "name"]}
 onValueSelected={value => {
     document.location.href = `./${value}`;
 }}
/>
4

1 回答 1

0

在这里，strictSelection您还可以检查值选择的原因，如果值选择的原因是建议，它还会为您提供source对象（来自建议），您可以使用该对象提取任何字段。从onValueSelected 文档：

onValueSelectedis called whenever a suggestion is selected or a search is performed by pressing enter key. source如果行动的原因是“SUGGESTION_SELECT”，它也会传递行动的原因和对象。可能的原因有：

'SUGGESTION_SELECT'

'ENTER_PRESS'

'CLEAR_VALUE'

以下是source结合选择原因使用对象的方法：

<DataSearch
  ...
  dataField={["symbol", "name"]}
  onValueSelected={(value, cause, source) => {
    if (cause === 'SUGGESTION_SELECT') {
      document.location.href = `./${source.name}`;
    }
  }}
/>

演示

于 2018-09-11T14:11:45.783 回答