Я использую Semantic UI React, чтобы создать раскрывающийся список для выбора страны. Чтобы получить значения, которые передаются как атрибуты в <div role=option />.
Чтобы получить выбранный div, я использую это:
handleSelectCountry = (e, props) => {
const selected = $('div.item[aria-selected=true]');
const flag = selected.get(0).children[0].className;
console.info(selected);
this.setState({ country: props.value, flag });
};
При регистрации он регистрирует предыдущий выбранный div как <div role = "option" aria-selected = "false">Previous selected</div>.
Однако использование того же селектора в консоли Chrome дает правильный <div role=option aria-selected = "true">Current selected</div>.
Код DropDown (от semantic-ui-react):
<Dropdown
fluid
required
placeholder = "Select Country"
search
selection
options = {Form.countryList}
value = {country}
onChange = {this.handleSelectCountry}
/>
@Andy, это была моя первоначальная мысль, однако параметры генерируются семантическим пользовательским интерфейсом, поэтому я не уверен, как бы я стал назначать и / или использовать ссылки.
Есть ссылка на аддон. Это поможет?
Я использовал этот ответ для решения своей проблемы: stackoverflow.com/a/51227478/10773032



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Обработчик onChange вызывается с первым аргументом, который является экземпляром React SyntheticEvent [1].
Из него можно получить currentTarget и запросить тег значка, содержащийся в нем.
const onChange = (event, data) => {
const [ icon ] = event.currentTarget.getElementsByTagName('i');
const flag = icon.className;
this.setState({ country: props.value, flag });
}
Спасибо за Ваш ответ. Это работает для события щелчка, но не для стрелки в раскрывающемся списке и события ввода. Обновлено: я считаю, что это связано с тем, что currentTarget становится документом на стрелке и вводит событие.
Вероятно, вам не следует использовать jQuery. Может быть, лучше использовать реф ...?