Question

我正在尝试编写一个简单的react应用程序（使用react bootstrap），该应用程序的下拉列表具有一些值。

我的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方法中，我无法获取值“悉尼”和“霍巴特”。

的输出

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-bootstrap下拉列表应该具有某种处理程序，您无需在其中像这样肮脏地访问innerText。

另外，您的物品也应包装在<Dropdown.Menu></Dropdown.Menu>内，并且处理程序应位于DropdownButton上。

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

1 个答案: