React AutoSuggest：搜索文本框不更新建议选择答案

【问题标题】：React AutoSuggest: search text box not updating on suggestion selectionReact AutoSuggest：搜索文本框不更新建议选择
【发布时间】：2020-04-08 11:37:18
【问题描述】：

我正在使用 react autosuggest 库来构建自动建议

import Autosuggest from "react-autosuggest";
import React, { Component } from "react";
import QueryString from "query-string";

class AutoSuggestSearch extends Component {
  constructor() {
    super();
    this.state = {
      value: "",
      suggestions: []
    };
    this.getSuggestionValue = this.getSuggestionValue.bind(this);
    this.renderSuggestion = this.renderSuggestion.bind(this);
  }

  onChange = (event, { newValue }) => {
    this.setState({
      value: newValue
    });
  };

  getSuggestionValue = suggestion => suggestion.fullNameSuggestion;


  renderSuggestion = suggestion => <div>{suggestion.name}</div>;

  onSuggestionSelected = (event, { suggestion}) => {
    console.log(suggestion);
    this.setState({
      suggestions: [],
      value: suggestion.name
    });
  };

  onSuggestionsFetchRequested = ({ value }) => {
    const params = {
      stationPrefixName: value
    };
    const queryParams = QueryString.stringify(params);
    fetch(`http://localhost:8000/api/suggest?${queryParams}`)
      .then(res => res.json())
      .then(data => {
        console.log(data);
        this.setState({
          suggestions: data
        });
      })
      .catch(console.log);
  };

  // Autosuggest will call this function every time you need to clear suggestions.
  onSuggestionsClearRequested = () => {
    this.setState({
      suggestions: [],
      value: ""
    });
  };

  render() {
    const { value, suggestions } = this.state;

    const inputProps = {
      placeholder: "Search",
      value,
      onChange: this.onChange
    };


    return (
      <Autosuggest
        suggestions={suggestions}
        onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
        onSuggestionsClearRequested={this.onSuggestionsClearRequested}
        onSuggestionSelected={this.onSuggestionSelected}
        getSuggestionValue={this.getSuggestionValue}
        renderSuggestion={this.renderSuggestion}
        inputProps={inputProps}
      />
    );
  }
}

export default AutoSuggestSearch;

在搜索框上键入时会呈现建议，并且 onSuggestionSelected 内的日志会正确记录，但输入搜索框未正确更新。

在进一步调试时，我发现onSuggestionsClearRequested 也在onSuggestionSelected 之后被调用，这导致搜索输入框为空。

我通过在 onSuggestionsClearRequested 中添加 const 字符串来验证这一点

  onSuggestionsClearRequested = () => {
    alert("clear request");
    this.setState({
      suggestions: [],
      value: "mysearch"
    });
  };

有没有办法阻止onSuggestionsClearRequested 对建议选择的调用？或者更新onSuggestionsClearRequested里面的搜索查询值是正确的方法？

【问题讨论】：

标签： javascript html reactjs autocomplete

【解决方案1】：

onSuggestionsClearRequested 函数在您每次在搜索输入之外单击时都会被调用，这是所使用库的默认实现，

我们在onSuggestionsClearRequested 中实现的内容取决于我们自己。您可以按如下方式更改实现：如果未选择可用选项，则方法将关键字保留在输入中

  onSuggestionsClearRequested = () => {};

这应该提供所需的实现行为。

【讨论】：

【解决方案2】：

你好，你可以用钩子接近。它看起来不错，而且编码更少。

您可以在下面找到

https://github.com/rajmaravanthe/react-auto-suggestion

【讨论】：

这无关紧要。