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

Question

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

我的反应组件的代码是

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;

在我的句柄选择方法中，我无法获取值"悉尼"和"霍巴特"。 的输出

console.log(selectedOption.target);

是

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

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

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

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

但它打印未定义。

Answer 1

将处理程序定义更改为以下内容：-

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

不过，必须有比这更好的选择。react-bootstrapDropdown应该有某种处理程序，你不需要像这样玩肮脏的访问innerText。

此外，您的物品应包装在<Dropdown.Menu></Dropdown.Menu>内，并且您的处理程序应出现在此而不是DropdownButton上。