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

Question

我正在构建一个自动完成组件来搜索当前用户并将他们添加到团队中。搜索工作正常，除了我需要自定义一些我不知道该怎么做的事情。

首先，这个组件是根据 GitHub 的邀请用户模式建模的。您可以开始输入以搜索当前用户，它会填充它找到的任何结果。但是，如果它没有找到任何结果，它只会显示一项以通过电子邮件邀请该用户。如何编辑DataSearch 组件的结果列表的完整状态？我所能看到的只是通过onSuggestion 属性编辑每个建议的内容。我需要能够说，“如果结果为零，则显示这个。”

第二，选择从自动完成结果列表中的建议时，我需要能够重置搜索框，因为我填充了用户可以看到的列表。现在，搜索框填充了建议的值。所以，我很好地填充了下面的选定结果列表； but, I still need to be able to reset the search box when that result is selected.

救命？？？

Answer 1

CodeSandbox link

对于问题的第一部分，您可以在任何结果组件上使用 onNoResults 属性来在未找到结果时呈现自定义 JSX。来自docs：

onNoResults 字符串或 JSX [可选]

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

<ResultList
    ...
    // custom JSX when no results are found
    onNoResults={
        <section>
            <input />
            <button>Add</button>
        </section>
    }
/>

对于问题的第二部分，IMO 有两种方法可以解决这个问题。

1. 使用ReactiveComponent 可以创建自定义的 ReactiveSearch 组件。
2. 使用customQuery

我将解释如何使用 customQuery 来解决此问题，但根据最适合您需求的方法创建自定义组件可能会更好。

在example 我分享了我的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 的原因是为了完全控制应用哪个查询来检索结果。 ReactiveSearch 旨在工作reactively。当一个值被设置到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 道具。它们的工作方式与您在反应中创建controlled component 的方式非常相似。 Docs

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

Demo for this answer using customQuery