在 React 上使用 Ajax 标签自动完成答案

【问题标题】：Tags AutoComplete with Ajax on React在 React 上使用 Ajax 标签自动完成
【发布时间】：2020-07-13 15:11:44
【问题描述】：

我尝试为 React 寻找具有下一个功能的自动完成插件：

是多个标签。
通过 ajax 获取建议。
点击删除标签。

你知道一些可以尝试的插件吗？还是您认为我必须构建这些功能？

这个插件很酷，但不是多个：

https://github.com/reactjs/react-autocomplete

这个插件有多个但没有ajax：

http://i-like-robots.github.io/react-tags/

有什么想法吗？

【问题讨论】：

标签： reactjs ajax autocomplete

【解决方案1】：

这是一个示例，演示如何使用 react-tag-autocomplete 包和异步获取的建议：

const React = require('react')
const ReactDOM = require('react-dom')
const ReactTags = require('../lib/ReactTags')
const debounce = require('./debounce')
const fetchData = require('./fetch-data')

class App extends React.Component {
  constructor (props) {
    super(props)

    this.state = {
      tags: [
        { id: 184, name: 'Thailand' },
        { id: 86, name: 'India' }
      ],
      busy: false,
      suggestions: []
    }

    this.handleInputChange = debounce(this.handleInputChange.bind(this));
  }

  handleDelete (i) {
    const tags = this.state.tags.slice(0)
    tags.splice(i, 1)
    this.setState({ tags })
  }

  handleAddition (tag) {
    const tags = [].concat(this.state.tags, tag)
    this.setState({ tags })
  }

  handleInputChange(query) {
    if (!this.state.busy) {
      this.setState({ busy: true })

      return fetchData(query).then((suggestions) => {
        this.setState({ busy: false, suggestions })
      })
    }
  }

  render () {
    return (
      <React.Fragment>
        <p>Select the breweries you have visited using React Tags below (powered by the <a href="https://www.openbrewerydb.org/">Open Brewery DB</a>):</p>
        <ReactTags
          tags={this.state.tags}
          noSuggestionsText={'No suggestions found'}
          suggestions={this.state.suggestions}
          handleDelete={this.handleDelete.bind(this)}
          handleAddition={this.handleAddition.bind(this)}
          handleInputChange={this.handleInputChange} />
        <p>Output:</p>
        <pre><code>{JSON.stringify(this.state.tags, null, 2)}</code></pre>
      </React.Fragment>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('app'))

该示例可在存储库here 中找到，并在多个问题中进行了讨论。

【讨论】：