Jquery Selector получает предыдущий выбранный aria элемент, а не текущий

Я использую 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}
/>

Вероятно, вам не следует использовать jQuery. Может быть, лучше использовать реф ...?

Andy 11.12.2018 00:08

@Andy, это была моя первоначальная мысль, однако параметры генерируются семантическим пользовательским интерфейсом, поэтому я не уверен, как бы я стал назначать и / или использовать ссылки.

Kyle 11.12.2018 00:21

Есть ссылка на аддон. Это поможет?

Andy 11.12.2018 00:32

Я использовал этот ответ для решения своей проблемы: stackoverflow.com/a/51227478/10773032

Kyle 11.12.2018 01:28
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
4
168
1

Ответы 1

Обработчик 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 становится документом на стрелке и вводит событие.

Kyle 11.12.2018 00:29

Другие вопросы по теме