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

【问题标题】：How to Double Click Toggle visibility of React Component?如何双击切换 React 组件的可见性？
【发布时间】：2021-01-22 07:08:46
【问题描述】：

目前有一个弹出组件显示使用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>
     

)

有什么想法吗？感谢您的任何建议或指导。

【问题讨论】：

标签： javascript reactjs react-functional-component

【解决方案1】：

线

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

在渲染组件时立即使用 false 参数调用 setToggleModal，并且我相信 undefined 成为 onDoubleClick 的值。（setState 是否有返回值不是 100%）

要解决您的问题，您应该将其作为道具提供：

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

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

【讨论】：

就是这样。出于某种原因，我没有意识到它是作为道具而不是内联函数传递的。谢谢！

【解决方案2】：

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

onDoubleClick 在这一行：

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

只是一个道具。所以你必须在PopupModal内的onDoubleClick事件的处理程序中调用props.onDoubleClick。

【讨论】：