1

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

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

Second, when a suggestion from the autocomplete result list is selected, I need to be able to reset the search box because I am populating a list that the user can see. 现在，搜索框填充了建议的值。因此，我可以很好地填充下面的选定结果列表；但是，在选择结果时，我仍然需要能够重置搜索框。

帮助？？？？

4

1 回答 1

1

代码沙盒链接

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

onNoResults字符串或 JSX [可选]

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

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

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

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

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

在我分享的示例中，我的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}
/>

使用 a 的原因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我的组件的值，我使用了defaultSelectedandonValueSelected道具。它们的工作方式与您在反应中创建受控组件的方式非常相似。文档

同样，如果自定义此流程听起来很复杂，那么使用ReactiveComponent创建自定义组件可能会更好。

使用 customQuery演示此答案

于 2018-07-02T17:34:47.763 回答