从 REACT 的下拉列表中提取选定的值答案

【问题标题】：Extract selected value from a dropdown in REACT从 REACT 的下拉列表中提取选定的值
【发布时间】：2023-03-09 10:38:02
【问题描述】：

我正在尝试编写一个简单的反应应用程序（使用反应引导程序），它有一个带有一些值的下拉菜单。

我的反应组件的代码是

import React, { Component } from 'react';

import { InputGroup, DropdownButton, Dropdown, FormControl, Row, Col } from 'react-bootstrap';

class Header extends Component {
handleSelect = selectedOption => {
    console.log(selectedOption.target);
}

state = {}
render() {
    return (
        <div>
            <h1>Top 3 Expert</h1>
            <hr />
            <Row>
                <Col></Col>
                <Col xs={3}>
                    <InputGroup className="mb-3">
                        <DropdownButton
                            onClick={this.handleSelect}
                            as={InputGroup.Prepend}
                            variant="outline-secondary"
                            title="Choose City"
                            id="input-group-dropdown-1" >
                            <Dropdown.Item href="#">Sydney</Dropdown.Item>
                            <Dropdown.Item href="#">Hobart</Dropdown.Item>
                        </DropdownButton>
                        <FormControl aria-describedby="basic-addon1" />
                    </InputGroup>
                </Col>
                <Col></Col>
            </Row>
        </div >
    );
}
}

export default Header;

在我的 handleSelect 方法中，我无法获取值“Sydney”和“Hobart”。

的输出

console.log(selectedOption.target);

是

<a href="#" class="dropdown-item" role="button">Sydney</a>

请您帮助了解我如何从下拉列表中提取所选值。

我也尝试将处理程序修改为此

handleSelect = selectedOption => {
    console.log(selectedOption.target.value);
}

但它打印未定义。

【问题讨论】：

标签： javascript reactjs react-redux react-bootstrap

【解决方案1】：

将您的处理程序定义更改为：-

handleSelect = selectedOption => {
    console.log(selectedOption.target.innerText);
}

不过，肯定有比这更好的选择。 react-bootstrap Dropdown 应该有某种处理程序，您不需要像这样对innerText 进行脏访问。

此外，您的项目应该包装在 <Dropdown.Menu></Dropdown.Menu> 中，并且您的处理程序应该出现在此而不是 DropdownButton。

【讨论】：

我试过这样做，但它没有打印值。我不确定。