如何雙擊切換 React 組件的可見性？

Question

目前有一個彈出組件顯示使用onDoubleClick()處理程序雙擊。但我想在雙擊彈出組件時關閉該彈出窗口，但我似乎無法讓它工作。 這是我一直在嘗試的，思考過程只是將toggleModal設置為false，它應該可以工作。

const [selectedImageId, setSelectedImageId] = useState(-1);
const [toggleModal, setToggleModal] = useState(false);

const handleModalPopupOnClick = (id) => {
    setSelectedImageId(id);
    setToggleModal(true);
};

return (
      <div>
         {toggleModal && <PopupModal onDoubleClick={setToggleModal(false)}/>}
          <div onDoubleClick{()=> handleModalPopupOnClick(image.id)>Open Popup</div>
      </div>
     

)

有任何想法嗎？ 感謝您的任何建議或指導。

Answer 1

線

{toggleModal && <PopupModal onDoubleClick={setToggleModal(false)}/>}

渲染組件時立即使用參數 false 調用setToggleModal ，我相信undefined成為onDoubleClick的值。 （如果setState有返回值，則不是 100%）

要解決您的問題，您應該將其作為道具提供：

{toggleModal && <PopupModal onDoubleClick={() => setToggleModal(false)}/>}

這是提供 function 定義，而不是調用 function。

Answer 2

也許PopupModal是您的自定義組件，因此它不提供onDoubleClick事件。

onDoubleClick在這一行：

{toggleModal && <PopupModal onDoubleClick={setToggleModal(false)}/>}

只是一個道具。 因此，您必須在PopupModal內的onDoubleClick事件的處理程序中調用props.onDoubleClick 。