Question

我正在使用语义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代码为（来自语义ui-react）：

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

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

jQuery选择器获取先前的aria选择的元素，不是当前的

1 个答案: