如何处理反应下拉列表中的选择

Question

我必须通过 selecting 下拉按钮

来存储汽车类型值

<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
    });
};

我在 select 下拉按钮时无法获得值。请提示将值存储到数据库

Answer 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 但您没有 "value" 所以我添加了它。如果您想使用来自您将使用 event.target.innerText

如何处理反应下拉列表中的选择

How to handle selection in reactstrap drop down list

reactjs

dropdown