按下另一个模式后立即关闭模式

Question

我希望在按下不同的模态框后关闭一个模态框，但我不确定该怎么做。本质上，如果按下 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);
  };

在return

<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>

Answer 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>

按下另一个模式后立即关闭模式

Close modal as soon as another one is pressed

jsx

bootstrap-modal

reactjs