反应：建议未显示在下拉列表中答案

【问题标题】：React: Suggestion is not showing in the drop-down反应：建议未显示在下拉列表中
【发布时间】：2019-04-22 19:36:25
【问题描述】：

我正在使用示例 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>
    );
  }
}

【问题讨论】：

我想您还需要包含库的 css 才能使其正常工作。
你缺少 import css github.com/ericgio/react-bootstrap-typeahead#css

标签： javascript reactjs react-bootstrap-typeahead

【解决方案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。

【讨论】：