Я пытаюсь использовать typeahaead через response- bootstrap -typeahead в моем приложении реагирования, используя тот же пример, который упоминался в этом вопросе
Реагировать: Предложение не отображается в раскрывающемся списке
В соответствии с ответом, упомянутым в этом вопросе, я также импортировал файл CSS. Но все же предложения отображаются в виде списка, когда я щелкаю поле typeahead.
Код: класс Typeaheadsearch с использованием response- bootstrap -typeahead
import {Typeahead} from 'react-bootstrap-typeahead';
import { FormGroup, FormControl as Control } from 'react-bootstrap';
import 'react-bootstrap-typeahead/css/Typeahead.css';
import React, { Component } from 'react'
class Typeaheadsearch extends React.Component {
state = {
multiple: false,
};
render() {
const {multiple} = this.state;
return (
<div>
<Typeahead
labelKey="name"
multiple={multiple}
options={[
'Green',
'Yellow',
'Orange',
'Red'
]}
placeholder="Choose a name..."
/>
<FormGroup>
<Control
checked={multiple}
onChange={(e) => this.setState({multiple: e.target.checked})}
type="checkbox">
</Control>
</FormGroup>
</div>
);
}
}
export default Typeaheadsearch
Я вызываю этот класс из своего приложения . js file
Код: приложение. js
class App extends Component {
render() {
return <Typeaheadsearch />
}
}
Вывод, как показано на рисунке:
Вывод
Может кто-нибудь помочь, пожалуйста.
У меня есть поиск этого конкретного файла css, и он присутствует в моем проекте. Кроме того, я попытался скопировать содержимое этого файла в мой файл. css, но он все еще не работает.
Кроме того, я проверил пользовательский интерфейс и присутствуют элементы этого типа впереди CSS.
