我正在利用例子 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 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。
关于javascript - react : Suggestion is not showing in the drop-down,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50717631/