javascript - 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}
/>
解决方案
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 });
}
推荐阅读
- java - 使用 Java mockito 验证 scheduleExecutorService 多次调用可运行对象
- c# - 如何显示控件集合依赖属性
- hash - 无法让按位异或在 GameMaker 2 中工作
- amazon-web-services - AWS Copilot 在运行容器中运行任务
- api-platform.com - API 平台 - 开发 - 所有请求都返回空结果
- reactjs - 你应该从 redux slice reducer 中返回什么?
- ansible - 如何运行多个剧本,每个剧本都有一个调查?
- ckeditor - 如何在 CKEditor 5 中禁用 Shift+Enter
- ios - 如何调整圆圈的大小以动态调整到任何 iPhone 的宽度和高度?
- java - 如何以 3D 排列方式打印不同尺寸的矩阵?