AutocomReactux

Я никогда не могу сказать, что будет делать мое автозаполнение, пока оно не будет должным образом обучено, а затем к этому моменту я, кажется, становлюсь параноиком в отношении его точности. К счастью, в React есть способ выбрать, какие именно теги будут отображаться в вашем списке автозаполнения с множественным выбором.

Используя пакет npm «react-selectize», вы можете использовать простой элемент MultiSelect.

import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { MultiSelect } from ‘react-selectize’
const tagsList = require(‘../constants/tags’)
class Tags extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tags: ‘’
    };
  }
  options = tagsList.tags.map(tag => {return {label: tag, value: tag}})
  onTagsAdd(values){
    let tag = values.forEach( value => values.value)
    this.setState({ tags: tag})
  }
  onFormSubmit(event){
    event.preventDefault();
    this.setState({
        tags: ''
    });
  render() {
    return (
      <div>
      <form  onSubmit={this.onFormSubmit.bind(this)}>
        <MultiSelect
          options = {this.options}
          placeholder = "Select Tags"
          onValuesChange = {this.onTagsAdd.bind(this)}>
        </MultiSelect>
        <button type="submit" >Save Tagged Item</button>
      </form>
      </div>
    );
  }
}
export default Tags;
}

Несколько замечаний. У вас есть возможность реализовать свои варианты несколькими различными способами. Вы можете импортировать массив и сопоставлять с ним значения и метки, как это сделал я. Вы можете сделать сопоставление заранее и импортировать объект по вашему выбору. В качестве альтернативы вы можете вести текущий список тегов пользовательского ввода.

Кроме того, это будет очень простой поиск тегов. Небольшой CSS поможет сделать готовый продукт более удобным для пользователя.

Наконец, этот модуль также поддерживает SingleSelect. Все, что вам нужно сделать, это поменять местами все экземпляры MultiSelect на SingleSelect.