按下另一个模态时立即关闭模态答案

【问题标题】：Close modal as soon as another one is pressed按下另一个模态时立即关闭模态
【发布时间】：2021-06-07 21:00:00
【问题描述】：

我希望在按下不同的模态后关闭一个模态，但我不知道该怎么做。本质上，如果modal1被按下，它应该显示modal1的内容，但是一旦modal2被按下，modal1应该消失，只有modal2应该显示它的内容。我该怎么做？我尝试在 onclick 中使用打开和关闭来设置它，但只有问题。这就是我当前设置代码的方式：

 const [openQueueList, setOpenQueueList] = useState(false);
  const handleOpenQueue = () => {
    setOpenQueueList(true);
  };
  const [openRoomlist, setOpenRoomlist] = useState(false);
  const handleOpenRoom = () => {
    setOpenRoomlist(true);
  };
  const [openRoomQueueList, setOpenRoomQueueList] = useState(false);
  const handleOpenRoomQueue = () => {
    setOpenRoomQueueList(true);
  };

在回报中

<div class="modal"> 
            <div >
              {openQueueList ? 
                <TrackTable></TrackTable>
               : null}
            </div>
          </div>
          <div class="modal"> 
            <div >
              {openRoomlist ? 
               <LobbyUsers> </LobbyUsers>
               : null}
            </div>
          </div>
          <div class="modal"> 
            <div >
              {openRoomQueueList ? 
                <QueueSection></QueueSection>
               : null}
            </div>

触发按钮

           <button onClick={handleOpenRoomQueue}>
              <QueueMusicIcon></QueueMusicIcon>
            </button>
            <button onClick={handleOpenRoom}>
              <GroupIcon ></GroupIcon>
            </button>
            <button onClick={handleOpenQueue}>
              <AudiotrackIcon></AudiotrackIcon>
            </button>

【问题讨论】：

能否请您添加一些代码，即您触发打开模式事件的代码
我知道我忘记了什么，现在补上，抱歉。

标签： reactjs bootstrap-modal jsx

【解决方案1】：

您可以给每个模式一个键，而不是为每个模式使用一个状态。

状态看起来像这样

const [currentModal, openModal] = useState(null);

然后打开

<button onClick={() => openModal('queueList')}>Queue List</button>
<button onClick={() => openModal('roomList')}>Room List</button>
<button onClick={() => openModal('roomQueueList')}>Room Queue List</button>

然后你的模态看起来像：


<div className="modal">

  {currentModal === 'queueList' ? 
    <TrackTable></TrackTable>
  : null}

  {currentModal === 'roomList' ?
    <LobbyUsers> </LobbyUsers>
  : null}

  {currentModal === 'roomQueueList' ?
    <QueueSection></QueueSection>
  : null}

</div>

【讨论】：

非常感谢！
没问题，是的！