ReactJS

Question

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

首先，此组件仿照 GitHub 的邀请用户模式。您可以开始键入以搜索当前用户，它会填充找到的任何结果。但是，如果它没有找到任何结果，它只会显示一项以通过电子邮件邀请该用户。如何编辑 DataSearch 组件的结果列表的完整状态？我所能看到的就是通过 onSuggestion 道具编辑每个建议的内容。我需要能够说，"If there are zero results, display this."

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

求助????

Answer 1

CodeSandbox link

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

onNoResults String or JSX [optional]

show custom message or component when no results founds.

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

对于问题的第二部分，在我看来，您可以通过两种方式来解决这个问题。

使用 ReactiveComponent 可以创建自定义 ReactiveSearch 组件。
使用customQuery

我将解释如何使用 customQuery 来解决这个问题，但最好创建一个自定义组件，具体取决于哪种方法最适合您的需求。

在 example I've shared my 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;
  };

因此，无论何时清除该值，我都只是 return 之前的查询，因此结果列表显示了之前查询的正确结果（在清除该值之前）。

另外，为了从我的组件中控制 DataSearch 的值，我使用了 defaultSelected 和 onValueSelected 道具。它们的工作方式与您创建 controlled component in react. Docs

的方式非常相似

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

Demo for this answer using customQuery

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

ReactJS - ReactiveSearch - Custom event on suggestion selection

javascript

reactivesearch