如何在打开新模式时关闭打开的模式 window？

Question

我想知道如何在 React 中关闭一系列模态windows。我要的是当已经打开一个的时候，关闭前一个。

enter image description here

export const Labels = ({ id, content, color }) => {
  const [changeColor, setChangeColor] = useState(false);

  const hanldeChange = () => { };

  return (
    <>
      <div className="px-3 border-2 border-blur-lg flex justify-between m-5 rounded-md">
        <div className="flex py-3">
          <BlockColor color={color} />
          <input
            type="text"
            id="txtLabel"
            name="txtLabel"
            className="text-base ring-white focus:ring-transparent mx-3 text-gray-700 outline-none"
            value={content}
            onChange={hanldeChange}
          />
        </div>
        <div className="flex py-3">
          <button className="mx-2">
            <img
              src={`./assets/Pantone.svg`}
              alt="New Label"
              onClick={() => setChangeColor(!changeColor)}
            />
          </button>
          <button className="mx-3">
            <img src={`./assets/Delete.svg`} alt="Delete" />
          </button>
          <ModalColor
            changeColorState={changeColor}
            setChangeColorState={setChangeColor}
          />
        </div>
      </div>
    </>
  );
};

它是一个模态组件，接收三个属性，ID，内容和颜色。这是动态生成的，每个“标签”都有一个 ID、内容和颜色。当他们按下一个按钮时，它会触发另一个呈现可用颜色的模式。每次他们单击按钮更改颜色时，window 都会打开，如果他们转到另一个标签并再次按下，则会打开一个新标签。

我想知道的是如何做到这样我就知道什么时候模态 window 打开 select 颜色，而另一个模态 window 打开 select一个颜色，它关闭。

export const ModalColor = ({ changeColorState, setChangeColorState }) => {


  const [blockColor, setBlockColor] = useState("#409FFF");

  const handleColorChange = (e) => {
    setBlockColor(e.target.value);
    setChangeColorState(false);
  };

  return (
    <>
      {changeColorState && (
        <div className="container absolute bg-white -right-2 top-auto mt-7 shadow-lg border-2 w-64 m-5 rounded-md overflow-x-hidden">
          <p className="mx-2 text-gray-700 font-medium">Change Color</p>
          <div className="mx-3 grid grid-cols-5 gap-4 my-2 rounded-full">
            <input
              type="radio"
              className="cursor-pointer form-radio h-6 w-6 text-rojo"
              value="#FD7972"
              checked
              readOnly
              onClick={handleColorChange}
            />

            <input
              type="radio"
              value="#FE9F5E"
              checked
              readOnly
              onClick={handleColorChange}
              className="cursor-pointer form-radio h-6 w-6 text-naranja"
            />

            <input
              type="radio"
              value="#FFD454"
              checked
              readOnly
              onClick={handleColorChange}
              className="cursor-pointer form-radio h-6 w-6 text-amarillo"
            />

          </div>
          <p>{blockColor}</p>
        </div>
      )}
    </>
  );
};

Answer 1

您可以有一个侦听器来检测您何时在您的颜色外部单击 window 并且当您在外部单击时您可以将 changeColorState 设置为 false。因此，只要您在 window 之外单击，它就会关闭。

您可以使用 useRef Hook 实现检测外部点击功能，或者您也可以使用像这样的包：https://www.npmjs.com/package/react-outside-click-handler

我上面链接的包看起来像这样

import OutsideClickHandler from 'react-outside-click-handler';

export const ModalColor = ({ changeColorState, setChangeColorState }) => {
const [blockColor, setBlockColor] = useState("#409FFF");

const handleColorChange = (e) => {
     setBlockColor(e.target.value);
    setChangeColorState(false);
};

return (
    <>
     <OutsideClickHandler
       onOutsideClick={() => {
         setChangeColorState(false)
       }}
     >
        {changeColorState && (
            <div className="container absolute bg-white -right-2 top-auto mt-7 shadow-lg border-2 w-64 m-5 rounded-md overflow-x-hidden">
                <p className="mx-2 text-gray-700 font-medium">Change Color</p>
                <div className="mx-3 grid grid-cols-5 gap-4 my-2 rounded-full">
                    <input
                        type="radio"
                        className="cursor-pointer form-radio h-6 w-6 text-rojo"
                        value="#FD7972"
                        checked
                        readOnly
                        onClick={handleColorChange}
                    />

                    <input
                        type="radio"
                        value="#FE9F5E"
                        checked
                        readOnly
                        onClick={handleColorChange}
                        className="cursor-pointer form-radio h-6 w-6 text-naranja"
                    />

                    <input
                        type="radio"
                        value="#FFD454"
                        checked
                        readOnly
                        onClick={handleColorChange}
                        className="cursor-pointer form-radio h-6 w-6 text-amarillo"
                    />

                </div>
                <p>{blockColor}</p>
            </div>
        )}
       </OutsideClickHandler>
    </>
);

我不确定这是否是解决此问题的最佳方法，但它至少应该有效。

如何在打开新模式时关闭打开的模式 window？

How to close an open modal window when a new one opens?

javascript

web

reactjs

progressive-web-apps

react-redux