表單提交后反應js顯示成功和錯誤消息

Question

我需要根據我的要求顯示成功或錯誤消息。 目前我正在使用它的警報消息。 我如何動態顯示此消息。 如果錯誤，我需要顯示紅色消息，如果成功則顯示綠色消息。 我們可以根據請求類型更改 div css class 和消息嗎？

我的功能

  const saveInvoice = (data) => {
 
const header = {
  Auth_token: `${appUserConfig.accessTokenName}=${appUserConfig.accessToken}`,
  User_name: appUserConfig.userName,
};
console.log(header);
httpPost(SAVE_INVOICE,data, header)
  .then((response) => {
   
    if (response.status === 200) {
     alert("Successfully Save")
    }
  })
  .catch((e) => {
    alert("Error")
    console.log("e:", e);
  });

};

我需要使用具有更改顏色和消息內容的單個 div 來執行此操作。

Answer 1

您不能更改警報的樣式，因為警報框是系統 object，而不是 CSS。 您可以編寫自己的警報框或使用react-alert等庫

Answer 2

警告框為系統 object，不受 CSS 約束。 要執行這種操作，您需要創建一個 HTML 元素並模仿 alert() 功能。

您可以通過創建自己的具有絕對定位等的 div 元素來模仿它，但我建議使用門戶並創建模式。 或使用諸如 react toastify 之類的庫，它可以為您彈出通知。

如果您不希望彈出窗口消失，請使用 state 之類的 isError 和 isSuccess 並有條件地渲染組件