如何在 React 中检查组件是否在 onblur 事件后被点击

Question

嘿伙计们，我有一个问题，我有一个带有下拉菜单的搜索栏。截至目前，每当搜索栏上发生onBlur事件时，我想关闭下拉菜单。 (这只是一个输入标签( 但我也希望它检测它何时单击了我的下拉菜单。如果是这样，请触发其他一些功能。

这是我的搜索栏，它将在onClickLocationSearch属性之前调用onBlur prop，这不是我想要的，因为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. 我想调用句柄点击位置搜索，如果用户单击结果组件并失去对输入标签的关注，
2. 如果用户失去对输入标记的焦点，并且未单击"结果"组件，请调用句柄关闭位置搜索。

Answer 1

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