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

Question

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

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

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

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

这是结果/下拉菜单。

<Results
onClickLocationSearch={this.handleClickLocationSearch}
/>

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

以下是他们调用的函数:

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 中的第二个参数找出获得焦点的元素。上面写得很好here .