Javascript ReactJS-ReactiveSearch-建议选择的自定义事件

我正在构建一个自动完成组件来搜索当前用户并将他们添加到团队中。搜索效果很好，只是我需要定制一些我不知道该怎么做的东西

首先，这个组件是按照GitHub的邀请用户模式建模的。您可以开始键入以搜索当前用户，它将填充找到的任何结果。然而，如果它没有找到任何结果，它只会显示一个项目，通过电子邮件邀请该用户。如何编辑组件结果列表的完整状态？我所能看到的就是通过

onSuggestion

prop编辑每个建议的内容。我需要能够说，“如果没有结果，就显示这个。”

其次，当从自动完成结果列表中选择建议时，我需要能够重置搜索框，因为我正在填充一个用户可以看到的列表。现在，搜索框中填充了建议的值。因此，我正在填充下面所选结果的列表；但是，我仍然需要能够重置搜索框时，结果被选中

帮助？？？

对于问题的第一部分，当找不到结果时，可以在任何结果组件上使用prop

onNoResults

来呈现自定义JSX。从：

onNoResults字符串或JSX[可选]

未找到结果时显示自定义消息或组件

使用

customQuery

的原因是为了完全控制应用哪个查询来检索结果。ReactiveSearch就是为了工作而设计的。当在

DataSearch

中设置一个值时，

ResultList

将对此更改作出反应。拥有一个

customQuery

可以让我们控制为该更改触发哪个查询。另外，我将

DataSearch

的值保持在状态，以便在触发查询时清除它。下面是我在示例中使用的内容：

customQuery = (value, props) => {
    // find the current query using defaultQuery from DataSearch
    const currentQuery = DataSearch.defaultQuery(value, props);
    // clear the value in component's state
    this.setState({
      value: ""
    });
    if (value.length) {
      // store this query
      this.prevQuery = currentQuery;
      return currentQuery;
    }
    // if the value is empty, that is it was cleared, return the previous query instead
    return this.prevQuery;
  };

因此，每当值被清除时，我只返回上一个查询，这样结果列表就会显示上一个查询的正确结果（在值被清除之前）

另外，为了从我的组件控制

DataSearch

的值，我使用

defaultSelected

和

onValueSelected

道具。它们的工作原理与您在react中创建

同样，如果定制此流的方法听起来很复杂，那么最好使用创建自定义组件

---

因为我使用的是

DataSearch

，所以我从来没有看到过DataSearch的

onNoResults

选项。该组件可用吗？

onNoResults

是结果组件的一个道具，

ResultList

、

ResultCard

和

ReactiveList

都支持该道具。那么，我如何使用DataSearch autocomplete实现同样的功能呢？我只需要这两个来使用DataSearch autocomplete组件，因为页面上除了DataSearch建议列表之外没有其他空间用于结果列表。你的意思是，你不想显示结果，而只想显示建议吗？正确。这仅用于数据搜索建议下拉列表。

<DataSearch
    title="DataSearch"
    dataField={["original_title", "original_title.search"]}
    categoryField="authors.raw"
    componentId="BookSensor"
    customQuery={this.customQuery}
    defaultSelected={this.state.value}
    onValueSelected={this.updateState}
/>

customQuery = (value, props) => {
    // find the current query using defaultQuery from DataSearch
    const currentQuery = DataSearch.defaultQuery(value, props);
    // clear the value in component's state
    this.setState({
      value: ""
    });
    if (value.length) {
      // store this query
      this.prevQuery = currentQuery;
      return currentQuery;
    }
    // if the value is empty, that is it was cleared, return the previous query instead
    return this.prevQuery;
  };