首页 > 解决方案 > Jquery Selector 获取以前的 aria-selector 元素,而不是当前元素

问题描述

我正在使用 Semantic UI React 创建一个选择国家/地区下拉菜单。为了获取作为属性传递给 a 的值<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 代码是(来自语义 ui-react):

<Dropdown
  fluid
  required
  placeholder="Select Country"
  search
  selection
  options={Form.countryList}
  value={country}
  onChange={this.handleSelectCountry}
/>

标签: javascriptjqueryreactjs

解决方案


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

推荐阅读