当新的模式窗口打开时如何关闭打开的模式窗口？

Question

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

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、内容和颜色。当他们按下一个按钮时，它会触发另一个显示可用颜色的模式。每次他们单击按钮更改颜色时，窗口就会打开，如果他们转到另一个标签并再次按下，则会打开一个新标签。

我想知道的是如何做到这一点，以便我知道当一个模式窗口打开以选择颜色，而另一个模式窗口打开以选择颜色时，它会关闭。

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

您可以有一个侦听器来检测您何时在颜色窗口之外单击，当您在颜色窗口之外单击时，您可以将 changeColorState 设置为 false。因此，每当您在该窗口之外单击时，它都会关闭。

您可以使用 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>
    </>
);

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