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

Question

Currently have a popup component showing up double click using the onDoubleClick() handler.But I'd like to close that popup on double click of the popup component but I can't seem to get it to work. Here is what I have been trying, the thought process was to just to set toggleModal to false and it should work.

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>
     

)

Any ideas? Thank you for any suggestions or guidance.

Answer 1

The line

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

Is immediately calling setToggleModal with an argument of false when the component is rendered, and I believe undefined becomes the value of onDoubleClick . (Not 100% on if setState has a return value or not)

To fix your problem you should provided this as a prop:

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

This is providing a function definition rather than calling the function.

Answer 2

Maybe PopupModal is your custom component, so it doesn't provide onDoubleClick event.

onDoubleClick in this line:

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

is just a prop. So you must call props.onDoubleClick in the handler of onDoubleClick event inside the PopupModal .