javascript - 如何使 div 部分在外部点击时关闭？

Question

我有搜索建议部分，它在用户开始搜索时打开。

这意味着当用户在搜索输入中键入内容时，我会调用 setState({ isSearchActive: true })

现在，当用户点击 search-suggestions div 部分之外时，我想调用 `setState({ isSearchActive: false })``

在父组件中我创建了函数handleClosingSuggestions():

// this function in called onBlur in child component
  handleClosingSuggestions = (e) => {
      this.setState({ isSearchActive: false });
  };

  render() {
    const {
      searchedQuery, newsList, suggestionsArray, isSearchActive
    } = this.state;

    return (
      <Layout>
        <SearchBar handleSearchChange={this.handleSearchChange} />

        {suggestionsArray.length && searchedQuery.length > 1 && isSearchActive ? (
          <SearchSuggestions
            suggestionsArray={suggestionsArray}

            // PASS DOWN FUNC AS PROPs
            handleClosingSuggestions={this.handleClosingSuggestions}
          />
        ) : (
          ''
        )}
    )
    }

在子组件中，我在 div wrapper 上调用了 handleClosingSuggestions func onBlur 事件，但这不起作用。

export default ({ suggestionsArray, handleClosingSuggestions }) => (

// HERE IS ON BLUR EVENT
  <div className="wrapper" onBlur={handleClosingSuggestions}>
    <div className="suggestions">
      <div className="suggestions-section">
        <SuggestionsList suggestionsArray={suggestionsArray} />
      </div>
      <div className="latest-news-section">
        <LatestNewsList image={testImg} text="McLeish exits as Scotland coach after 12 games" />
      </div>
      <div className="related-trends-section">
        <RelatedTrendsList
          title="Topics"
          option1="Football"
          option2="Tennis"
          iconClass="icon-arrow-up-right2"
        />
      </div>
    </div>
  </div>
);

为什么没有触发模糊事件并且状态没有改变？

Answer 1

在 SuggestionsList 组件中，您可以像这样添加/删除事件监听器

componentDidMount() {
    document.addEventListener('click', this.handleClosingSuggestions);
}

componentWillUnmount() {
    document.removeEventListener('click', this.handleClosingSuggestions);
}