反应：建议没有显示在下拉列表中

Question

我正在使用示例 https://ericgio.github.io/react-bootstrap-typeahead/创建自动填充应用，但是，我无法看到示例中显示的下拉列表，有人可以告诉我这里有什么问题（请参阅附件）< / p>

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。