我創建了一個組件。在其中我有一個按鈕，一旦您單擊彈出視窗，就會顯示該按鈕。資料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>
我在做什么錯？
uj5u.com熱心網友回復：
您已將 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 應該放在整個表格組件之外。那應該可以解決問題。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/441656.html
標籤：javascript 反应 用户界面 反应钩子