如何处理 reactstrap 下拉列表中的选择答案

【问题标题】：How to handle selection in reactstrap drop down list如何处理 reactstrap 下拉列表中的选择
【发布时间】：2019-01-24 20:18:24
【问题描述】：

我必须通过选择下拉按钮来存储车型值

<Dropdown  direction="down" isOpen={this.state.dropdownOpen} toggle={this.toggle} >
    <DropdownToggle caret outline color="info">
                    Select your Vehicle Type 
    </DropdownToggle>
    <DropdownMenu onChange={this.handleChange} name="carType" >
    <DropdownItem name="classic">Classic</DropdownItem>
    <DropdownItem name="deluxe">Deluxe</DropdownItem>
    <DropdownItem name="luxury">Luxury</DropdownItem>
    <DropdownItem name="superLuxury">Super Luxury</DropdownItem>
    <DropdownItem name="limousine">Limousine</DropdownItem>
    <DropdownItem name="exo">Exotic Cars</DropdownItem>
</DropdownMenu>

我的onChange 函数是

handleChange = event => {
    this.setState({ 
        [event.target.name]: event.target.value
    });
};

当我选择下拉按钮时，我无法获得值。请提示将值存储到数据库中

【问题讨论】：

你用什么库来做下拉菜单？当你 console.log(event) 在你的 handleChange 中时会发生什么？
我用 reactstrap 做下拉菜单。。我什么也没得到
reactstrap 没有用于 DropDownMenu 的名为 onChange 的道具 - 但它确实有用于 DropDownItem 的 onClick - 所以这可能是您想要粘贴更改处理程序的地方（不幸的是在每个处理程序中）

标签： reactjs dropdown

【解决方案1】：

使用 react strap 获取下拉列表的值：

<Dropdown  direction="down" isOpen={this.state.dropdownOpen} toggle={this.toggle} >
    <DropdownToggle caret outline color="info">
                    Select your Vehicle Type 
    </DropdownToggle>
    <DropdownMenu name="carType" >
    <DropdownItem name="classic" value="classic" onClick={this.handleChange} >Classic</DropdownItem>
    <DropdownItem name="deluxe" value="deluxe" onClick={this.handleChange} >Deluxe</DropdownItem>
</DropdownMenu>

所做的更改：

1. 使用onClick 而不是onChange。
2. handleClick 正在读取单击的实际选项，因此它位于 DropdownItem 上。
3. 您要求event.target.value，但您没有“价值”，所以我添加了它。如果您想使用 DropdownItem 你会使用event.target.innerText

【讨论】：

谢谢它的工作