Reactjs-使用下拉菜单搜索

Question

我正在使用reactstrap，并且我有一个Navbar，里面有一个Input。正如，我输入Input，我想要一个下拉列表以显示可能的结果。我已经牢记了所有后端查询和前端onChange函数的结构。

我所需要的只是适当的标记。我已经有一个Input。现在，当其为空时，没有下拉菜单会出现，但在我键入时会出现一个下拉菜单。

reactstrap/html和Input的组合可以使用哪个Dropdown元素。

---

这是我想到的一团糟：

<Dropdown
    isOpen={this.state.dropdownOpen}
    toggle={this.toggleDropdown}
    >
    <DropdownToggle caret>
        <Input
            type='text'
            name='keyword'
            placeholder='Search for reddit'
            value={this.state.keyword}
        />
    </DropdownToggle>
    <DropdownMenu>
        <DropdownItem>Option 1</DropdownItem>
        <DropdownItem>Option 2</DropdownItem>
        <DropdownItem>Option 3</DropdownItem>
        <DropdownItem>Option 4</DropdownItem>
    </DropdownMenu>
</Dropdown>

---

其他功能：

constructor(props) {
    super(props) 
    this.state = {
        keyword: '',
        dropdownOpen: false,
        subreddits: [],
        posts: [],
        users: []
    }
    this.handleChange = this.handleChange.bind(this)
    this.toggleDropdown = this.toggleDropdown.bind(this)
}

toggleDropdown() {
    this.setState(prev => ({
        dropdownOpen: !prev.dropdownOpen
    }))
}

handleChange(event) {
    this.setState({
        [event.target.name]: event.target.value
    }, () => {
        this.state.keyword.length !== 0 &&
            this.setState({
                subreddits: this.filterSubreddits()
            })
    })
}

我无法在Input中输入任何内容。另外，Input位于“ DropDown”按钮内，看上去很丑！！