javascript - react : Suggestion is not showing in the drop-down

Question

我正在利用例子 https://ericgio.github.io/react-bootstrap-typeahead/但是，要创建一个自动完成应用程序，我无法看到示例中显示的下拉菜单，有人可以告诉我这里出了什么问题吗(请参阅附件)

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

Answer 1

您必须在项目中包含提供的 CSS 文件:

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

您还必须像这样导入它，

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

但是您已从另一个模块导入了 Typeahead。