如何双击切换 React 组件的可见性？

Question

目前有一个弹出组件显示双击使用 onDoubleClick() handler.But 我想在双击弹出组件时关闭该弹出窗口，但我似乎无法获得它上班。这是我一直在尝试的，思考过程只是将 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 是否具有 return 值，则不是 100%）

要解决你的问题，你应该提供这个作为道具：

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

这是提供函数定义而不是调用函数。

Answer 2

可能 PopupModal 是您的自定义组件，因此它不提供 onDoubleClick 事件。

onDoubleClick 这一行：

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

只是一个道具。因此，您必须在 PopupModal.

内的 onDoubleClick 事件的处理程序中调用 props.onDoubleClick

如何双击切换 React 组件的可见性？

How to Double Click Toggle visibility of React Component?

javascript

reactjs

react-functional-component