無法使用事件偵聽器再次切換組件

Question

賞金將在 4 小時后到期。 此問題的答案有資格獲得+100聲望獎勵。 吉米想引起更多人對這個問題的關注。

您可以在此處找到代碼和框。

我有一個執行以下操作的組件：

1. 顯示圖標
2. 如果單擊該圖標，則在其位置顯示搜索輸入。
3. 如果用戶在顯示時單擊搜索輸入之外的任何位置，則隱藏搜索輸入並再次顯示該圖標。

問題在於，單擊該圖標后，搜索輸入確實顯示，單擊搜索輸入之外的任何位置再次顯示該圖標。 但是，如果你再次點擊該圖標第二次，搜索輸入不顯示。

我嘗試將 ref 附加到圖標並評估單擊圖標時是否包含該事件，但該條件語句沒有幫助。 如何確保當我再次單擊該圖標時，輸入再次顯示？ 謝謝！

import ReactDOM from "react-dom";
import "@elastic/eui/dist/eui_theme_amsterdam_light.css";
import React, { useEffect, useRef, useState } from "react";
import { EuiButtonIcon, EuiFieldText } from "@elastic/eui";

const App = () => {
  const [showSearch, setShowSearch] = useState(false);
  const searchInputRef = useRef(null);

  useEffect(() => {
    document.addEventListener(
      "click",
      (event) => handleClickOutside(event, showSearch),
      false
    );
  }, [showSearch]);

  useEffect(
    () => () => {
      document.removeEventListener(
        "click",
        (event) => handleClickOutside(event, false),
        false
      );
    },
    []
  );

  const handleClickOutside = (event, showSearch) => {
    if (
      searchInputRef.current &&
      !searchInputRef.current.contains(event.target) &&
      showSearch
    ) {
      setShowSearch(false);
    }
  };

  if (showSearch) {
    return (
      <EuiFieldText
        icon="search"
        placeholder="Sample Search Placeholder ..."
        inputRef={searchInputRef}
      />
    );
  }

  return (
    <EuiButtonIcon
      aria-label="button"
      iconType="search"
      iconSize="xxl"
      onClick={() => setShowSearch(true)}
    />
  );
};

export default App;

Answer 1

我認為你的方法是正確的，我改變的只是useEffect函數。

我剛剛刪除了用於刪除click事件的另一個useEffect函數。

我還將once選項傳遞給事件偵聽器，因此事件將在運行一次后被刪除。

useEffect(() => {
  const handleClickOutside = () => document.addEventListener("click", ({ target }) => {
    if (searchInputRef.current?.contains(target) === false && showSearch === true) setShowSearch(false);
    else handleClickOutside();
  }, { once: true });

  handleClickOutside();
}, [showSearch]);