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

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

我的react组件的代码是

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 = selectedOption => {
    console.log(selectedOption.target.innerText);
}

但肯定有比这更好的选择

react bootstrap

下拉列表应该有某种处理程序，您不需要像这样玩脏访问

innerText

---

此外，您的项目应该包装在

中，并且您的处理程序应该出现在该页面上，而不是

下拉按钮

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

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

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

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