React AsyncTypeahead using Typescript

问题

I'm trying to use the module React Bootstrap Typeahead (original and type versions) in React using tsx files.

Im using the following versions:

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

I builded the following SimpleAsyncExample class, trying to test the component by always return the same results no matter what the user types, but with a delay in the response...

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);
  }
}

I also configured (as indicated on the documentation) the css import...

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

This app isn't working, doesn't suggest any results.

The thing is that in the test or examples the there is none involving the AsyncTypeahead component and I didn't found any example, so if anyone has a solution, or maybe another module recommendation that work with Bootstrap 4 and React (with Typescript) or a working example that use this library will be gladly appreciated.

回答1:

You need to specify the correct labelKey field. The value is "label" by default, but in your case there is no "label" field in the options so the filter fails. Setting labelKey to "name" fixes the problem:

<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"
/>

Note that the input text will still filter the returned results, so entering "cal" will display "California" as a result, but entering "sdfgsdfg" will return an empty result set.

Finally, the ClearButton component is not exposed by the library, so you'll see a syntax error when the menu items render.

来源：https://stackoverflow.com/questions/56170309/react-asynctypeahead-using-typescript

标签

reactjs

react-bootstrap-typeahead