Jquery Selector 获取以前的 aria-selector 元素，而不是当前元素答案

【问题标题】：Jquery Selector getting previous aria-selected element, not currentJquery Selector 获取以前的 aria-selector 元素，而不是当前元素
【发布时间】：2018-12-10 22:45:07
【问题描述】：

我正在使用 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.log(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。也许考虑使用 ref 代替...？
@Andy，这是我最初的想法，但选项是由语义 ui 生成的，所以我不确定如何分配和/或使用 refs。
有一个ref addon。这会有帮助吗？
我用这个答案解决了我的问题：stackoverflow.com/a/51227478/10773032

标签： javascript jquery reactjs

【解决方案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 成为箭头上的文档并输入事件。