如何在 React 中的 onblur 事件后检查组件是否已被单击答案

【问题标题】：How to check if a component has been clicked after an onblur event in React如何在 React 中的 onblur 事件后检查组件是否已被单击
【发布时间】：2019-08-16 18:48:29
【问题描述】：

大家好，我遇到了一个问题，我的搜索栏带有下拉菜单。截至目前，我想在搜索栏上发生 onBlur 事件时关闭下拉菜单。（这只是一个输入标签）但我也希望它能够检测到它何时点击了我的下拉菜单。如果是这样，请触发其他一些功能。

这是我的搜索栏，它将在 onClickLocationSearch 道具之前调用 onBlur 道具，这不是我想要的，因为 onClickLocationSearch 和 onBlur 事件处理不同的功能。换句话说，我希望 onBlur 事件检查它是否点击了另一个组件。

这是带有 onBlur 事件的搜索栏：

<SearchBar
onFocus={this.handleOpenLocationSearch}
placeholder={this.state.placeholder}
onBlur={this.handleCloseLocationSearch}
/>

这是结果/下拉菜单。

<Results
onClickLocationSearch={this.handleClickLocationSearch}
/>

onBlur 将被调用，因为无论您是否单击结果组件，它都会被调用。

下面是它们调用的函数：

public handleClickLocationSearch() {
    this.setState({queryParam: '/blah'});
    this.setState({ query: '' });
    this.setState({ editing: false });
  }

public handleCloseLocationSearch() {
    this.setState({ editing: false });
    this.setState({ query: '' });
}

如果用户单击结果组件并失去对输入标签的关注，我想调用 handleClickLocationSearch，
如果用户失去对输入标签的关注并且没有点击结果组件，请调用 handleCloseLocationSearch。

【问题讨论】：

标签： reactjs onblur

【解决方案1】：

最好的解决方案是使用onBlur synthetic event 中的第二个参数来找出哪些元素获得了焦点。有一篇很好的文章here。

【讨论】：