在反应中关闭弹出窗口时面临非常奇怪的问题。正在调用方法但弹出窗口未关闭

Question

我创建了一个组件。其中我有一个按钮，一旦你点击弹出窗口就会显示出来。 popup 的数据放在另一个组件中。下面是弹出窗口。

问题是当我点击角落的十字(x) 按钮时，我的弹出窗口没有关闭。

下面是启动弹出窗口的代码。

const [statusUpdateFlag, setStatusUpdateFlag] = useState(false);
     <td>
                    <button type="button" onClick={(event) => handleStatusUpdateClick(event)}>
                     click
                    {statusUpdateFlag && (
                      <StatusUpdate
                                certificate={props.certificate}
                                handleStatusUpdateClick={handleStatusUpdateClick}
                                closePopUp={closePopUp}
                            />
                    )}       
                    </button>
          </td>

一旦用户点击 button ，statusUpdateFlag 将启动真正的弹出窗口。

 const handleStatusUpdateClick = async (event: SyntheticEvent) => {
        event.preventDefault();
        setStatusUpdateFlag(true);
 }

现在在我刚刚创建的 close 按钮上 setStatusUpdateFlag(false); 。甚至这个方法也被调用了。仍然弹出窗口没有关闭。

const closePopUp = (event: any) => {
        alert("closepopup called");
        event.preventDefault();
        setStatusUpdateFlag(false);
    };

单击后 X 方法被调用，但 popup 未关闭。

下面是 X 按钮的代码，

<button
  className={styles.closeicon}
  onClick={(event) => props.closePopUp(event)}
>
  x
</button>

我做错了什么？

Answer 1

您已将 Popup 组件编写为按钮的子项，因此当您单击弹出窗口关闭时，也会触发父按钮单击的触发器，因此弹出窗口可见状态再次设置为 true。

const [statusUpdateFlag, setStatusUpdateFlag] = useState(false);
<td>
    <button type="button" onClick={(event) => handleStatusUpdateClick(event)}>
        click
        {/* Issue is here */}
        {statusUpdateFlag && (
            <StatusUpdate
                certificate={props.certificate}
                handleStatusUpdateClick={handleStatusUpdateClick}
                closePopUp={closePopUp}
            />
        )}
    </button>
</td>;

你应该把 StatusUpdate 组件放在按钮外面，在我看来 UI，如果可能的话，放在整个 table 组件外面。这应该可以解决问题。

在反应中关闭弹出窗口时面临非常奇怪的问题。正在调用方法但弹出窗口未关闭

facing quite strange issue in popup closing in react. method is getting called but popup is not closing

javascript

user-interface

reactjs

react-hooks