使用 React Hooks 仅显示模态 window 一次

Question

我正在使用自定义挂钩来显示模态 window，你知道我怎样才能显示模态 window 一次吗，现在当我刷新 window 我可以再次查看模态 window...

哪种方法最好？

这是我的代码：

import React from "react";
import useModal from "./customHooks/useModal";
import Modal from "./customHooks/Modal";

const SearchPage = ({ location }) => {
  const { isShowing, toggle } = useModal();

  const search = window.location.search;
  const parametros = "?q=Search";

  window.addEventListener('popstate', (event) => {

      console.log('Event', event);
    });

  return (
    <>
      <p>
        <strong>Location Props: </strong>
        {location.search}
      </p>

      {parametros === search ? (
        <Modal
          width={["333px", "111px"]}
          height={["555px", "444px"]}
          margin={["0px 10px 3px 5px", "1px 2px 3px 4px"]}
          padding={["0px 11px 4px 7px", "1px 2px 3px 4px"]}
          isShowing={!isShowing}
          hide={toggle}
          contentModal={"OK Modal"}
        />
      ) : (
        <Modal
          width={["333px", "111px"]}
          height={["555px", "444px"]}
          margin={["0px 10px 3px 5px", "1px 2px 3px 4px"]}
          padding={["0px 11px 4px 7px", "1px 2px 3px 4px"]}
          isShowing={!isShowing}
          hide={toggle}
          contentModal={"Error Modal"}
        />
      )}

      <button className="button-default" onClick={toggle}>
        Show Modal
      </button>
    </>
  );
};

export default SearchPage;

谢谢你，问候，

Answer 1

您可以使用 localStorage 管理状态。

当模式激活时，为 localStorage 设置一个值。

+)

const SearchPage = ({ location }) => {
  const { isShowing, toggle } = useModal();
  console.log("LOCATION", location);
  const search = window.location.search;
  console.log("SEARCH", search);
  const params = new URLSearchParams(search);
  console.log("PARAMS", params);
  const foo = params.get("bar");
  console.log("foo", foo);

  const parametros = "?q=Search";

  window.addEventListener('popstate', (event) => {

      console.log('Event', event);
    });

  // create a click method check if a value in localStorage
  const handleClick = () => {
    const flag = localStorage.getItem('flag');
    if (!flag) {
      localStorage.setItem('flag', true);
      toggle();
    }
  }

  return (
    <>
      <p>
        <strong>Location Props: </strong>
        {location.search}
      </p>

      {parametros === search ? (
        <Modal
          width={["333px", "111px"]}
          height={["555px", "444px"]}
          margin={["0px 10px 3px 5px", "1px 2px 3px 4px"]}
          padding={["0px 11px 4px 7px", "1px 2px 3px 4px"]}
          isShowing={!isShowing}
          hide={toggle}
          contentModal={"OK Modal"}
        />
      ) : (
        <Modal
          width={["333px", "111px"]}
          height={["555px", "444px"]}
          margin={["0px 10px 3px 5px", "1px 2px 3px 4px"]}
          padding={["0px 11px 4px 7px", "1px 2px 3px 4px"]}
          isShowing={!isShowing}
          hide={toggle}
          contentModal={"Error Modal"}
        />
      )}
      // change toggle function to we created handleClick functtion as above.
      <button className="button-default" onClick={handleClick}>
        Show Modal
      </button>
    </>
  );
};

export default SearchPage;

使用 React Hooks 仅显示模态 window 一次

Display modal window only once with React Hooks

modal-dialog

reactjs

react-hooks