Реагировать: предложение не отображается в раскрывающемся списке - PullRequest
0 голосов
/ 06 июня 2018

enter image description here Я использую примеры на 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>
    );
  }
}

1 Ответ

0 голосов
/ 06 июня 2018

Вы должны включить предоставленный файл 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 из другого модуля.

...