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

Question

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

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

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

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

这是Results/Drop向下菜单。

<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。

Answer 1

最佳解决方案是使用 onBlur synthetic event to find out what element GAINED focus. There's a pretty good write up on it 中的第二个参数。

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

How to check if a component has been clicked after an onblur event in React

onblur

reactjs