React: Suggestion is not showing in the drop-down

问题

I'm making use of examples on https://ericgio.github.io/react-bootstrap-typeahead/ to create an autocomplete app, however, i'm not able to see the drop-down like the one which is showing in the examples, can someone tell me what is wrong in here (Please refer the attachment)

import React, {Component, Fragment } from 'react';
import {Typeahead} from 'react-typeahead';
import { FormGroup, FormControl as Control } from 'react-bootstrap';

export default class App extends React.Component {
  state = {
    multiple: false,
  };

  render() {
    const {multiple} = this.state;

    return (
      <Fragment>
        <Typeahead
          labelKey="name"
          multiple={multiple}
          options={[
            'Waylon Dalton',
            'Justine Henderson',
            'Abdullah Lang',
            'Marcus Cruz',
            'Thalia Cobb',
            'Mathias Little',
            'Eddie Randolph',
            'Angela Walker',
            'Lia Shelton',
            'Hadassah Hartman',
            'Joanna Shaffer',
            'Jonathon Sheppard'
          ]}
          placeholder="Choose a name..."
        />
        <FormGroup>
          <Control
            checked={multiple}
            onChange={(e) => this.setState({multiple: e.target.checked})}
            type="checkbox">
          </Control>
        </FormGroup>
      </Fragment>
    );
  }
}

回答1:

You must include the provided CSS file in your project:

// Import as a module in your JS
import 'react-bootstrap-typeahead/css/Typeahead.css';

<!-- Link as a stylesheet in your HTML -->
<link rel="stylesheet" href="https://unpkg.com/react-bootstrap-typeahead/css/Typeahead.css">

Also you have to import it like,

import {Typeahead} from 'react-bootstrap-typeahead'; // ES2015

But you have imported Typeahead from another module.

来源：https://stackoverflow.com/questions/50717631/react-suggestion-is-not-showing-in-the-drop-down

标签

javascript

reactjs

react-bootstrap-typeahead