Извлечь выбранное значение из раскрывающегося списка в REACT

Question

Я пытаюсь написать простое приложение для реагирования (с использованием response bootstrap), в котором есть раскрывающийся список с некоторым значением.

Код моего компонента реакции:

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

, но он печатает undefined.

Answer 1

Измените определение вашего обработчика на это: -

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

Хотя должен быть вариант получше. react-bootstrap В раскрывающемся списке должен быть какой-то обработчик, где вам не нужно играть с грязным доступом innerText вот так.

Также ваши элементы должны быть завернуты внутрь <Dropdown.Menu></Dropdown.Menu>, и ваш обработчик должен присутствовать на этом вместо DropdownButton.