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

Question

嘿伙计们，我有一个问题，我有一个带有下拉菜单的搜索栏。截至目前，我想在搜索栏上发生 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: '' });
}

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

标签： reactjsonblur

Answer 1

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