Реакция AsyncTypeahead с использованием Typescript - PullRequest
Новая
       28

Реакция AsyncTypeahead с использованием Typescript

1 голос
/ 16 мая 2019

Я пытаюсь использовать модуль React Bootstrap Typeahead ( оригинал и тип версии) в React с использованием файлов TSX.

Я использую следующие версии: 

"@types/react-bootstrap-typeahead": "3.4.5"
"react-bootstrap-typeahead": "3.4.3"

Я создал следующий класс SimpleAsyncExample , пытаясь протестировать компонент, всегда возвращая одни и те же результаты независимо от того, что пользователь вводит, но с задержкой ответа ... 

import * as React from 'react';
import {AsyncTypeahead, ClearButton, Token} from 'react-bootstrap-typeahead';

interface State {
  capital: string;
  name: string;
  population: number;
  region: string;
  setValue: (value: State) => void;
}

const options: State[] = [
  { name: 'Alabama', population: 4780127, capital: 'Montgomery', region: 'South', setValue: () => {} },
  { name: 'Alaska', population: 710249, capital: 'Juneau', region: 'West', setValue: () => {} },
  { name: 'Arizona', population: 6392307, capital: 'Phoenix', region: 'West', setValue: () => {} },
  { name: 'Arkansas', population: 2915958, capital: 'Little Rock', region: 'South', setValue: () => {} },
  { name: 'California', population: 37254503, capital: 'Sacramento', region: 'West', setValue: () => {} },
  { name: 'Colorado', population: 5029324, capital: 'Denver', region: 'West', setValue: () => {} },
];

type propTypes = {};
type defaultProps = {
  isLoading: boolean,
  options: State[]
};

export default class SimpleAsyncExample extends React.Component<propTypes, defaultProps> {

  state = {
    isLoading: false,
    options: []
  };

  render() {
    return (
      <div>
        <AsyncTypeahead
          {...this.state}
          id="typeahead"
          delay={800}
          emptyLabel="No se encontraron resultados"
          ignoreDiacritics={true}
          minLength={3}
          onSearch={this.onSearch}
          placeholder="Insert text to search"
          promptText="Searching"
          searchText="Searching"
          renderMenuItemChildren={(selectedItem: State, props) => {
            return <Token
              active
              disabled={false}
              tabIndex={5}
              href="https://test.com"
              onRemove={() => console.log(props.text)}>
              {selectedItem.name}<ClearButton onClick={() => {}} />
            </Token>;
          }}
        />
      </div>
    );
  }

  onSearch = (query: string) => {
    this.setState({isLoading: true});
    setTimeout(() => {
      this.setState({isLoading: false, options,});
    }, 2000);
  }
}

Я также настроил (как указано в документации) импорт css ... 

import 'react-bootstrap-typeahead/css/Typeahead.css';
import 'react-bootstrap-typeahead/css/Typeahead-bs4.css';

Это приложение не работает, не предлагает никаких результатов.

Дело в том, что в тесте или примерах нет ни одного компонента AsyncTypeahead, и я не нашел ни одного примера, поэтому, если у кого-то есть решение или, возможно, рекомендация другого модуля, работающая с Bootstrap 4 и React (с Typescript) или рабочий пример, который использует эту библиотеку, будет с благодарностью.

1 Ответ

1 голос
/ 17 мая 2019

Вам необходимо указать правильное поле labelKey. По умолчанию это значение «label», но в вашем случае в опциях нет поля «label», поэтому фильтр не работает. Установка labelKey в «имя» устраняет проблему: 

<AsyncTypeahead
  {...this.state}
  id="typeahead"
  delay={800}
  emptyLabel="No se encontraron resultados"
  ignoreDiacritics={true}
  labelKey="name" // <---------- You're missing this
  minLength={3}
  onSearch={this.onSearch}
  placeholder="Insert text to search"
  promptText="Searching"
  searchText="Searching"
/>

Обратите внимание, что введенный текст по-прежнему будет фильтровать возвращаемые результаты, поэтому при вводе "cal" в результате отобразится "California", а при вводе "sdfgsdfg" будет возвращен пустой набор результатов.

Наконец, компонент ClearButton не предоставляется библиотекой, поэтому вы увидите синтаксическую ошибку при отображении элементов меню.

...