React JS表单提交后动态展示成功与错误提示的实现方法

1. 准备提示容器DOM #

页面中仅需放置一个固定位置的提示div，默认处于隐藏状态：

<div id="globalToast" class="toast hidden"></div>

2. 定义对应状态的CSS样式 #

通过类名区分不同提示场景的样式，实现成功（绿色）、错误（红色）、隐藏状态的样式切换：

.toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 24px;
  border-radius: 4px;
  font-size: 14px;
  transition: all 0.3s ease;
}
/* 成功场景样式 */
.toast.toast-success {
  background-color: #f0f9eb;
  color: #67c23a;
  border: 1px solid #e1f3d8;
}
/* 错误场景样式 */
.toast.toast-error {
  background-color: #fef0f0;
  color: #f56c6c;
  border: 1px solid #fde2e2;
}
/* 隐藏状态样式 */
.toast.hidden {
  opacity: 0;
  visibility: hidden;
}

3. 封装通用提示控制逻辑 #

写一个可复用的提示触发函数，自动完成类名切换、消息内容写入、显隐控制的全流程，避免重复操作DOM：

// type可选值：success/error，message为要展示的提示文本
const showToast = (type, message) => {
  const toastEl = document.getElementById('globalToast');
  // 先重置类名，清除上一次的状态残留
  toastEl.className = 'toast';
  // 绑定对应状态的样式类，写入提示内容
  toastEl.classList.add(`toast-${type}`);
  toastEl.innerText = message;
  // 移除隐藏类，展示提示
  toastEl.classList.remove('hidden');
  // 自动3秒后隐藏，无需用户手动关闭
  clearTimeout(toastEl.timer);
  toastEl.timer = setTimeout(() => {
    toastEl.classList.add('hidden');
  }, 3000);
}

4. 改造原有saveInvoice函数 #

把原来的alert弹窗逻辑替换为上面封装的提示函数，实现接口状态和提示效果的联动：

const saveInvoice = (data) => {
  const header = {
    Auth_token: `${appUserConfig.accessTokenName}=${appUserConfig.accessToken}`,
    User_name: appUserConfig.userName,
  };
  httpPost(SAVE_INVOICE, data, header)
    .then((response) => {
      if (response.status === 200) {
        // 替换原生alert，触发绿色成功提示
        showToast('success', 'Successfully Save')
      }
    })
    .catch((e) => {
      // 替换原生alert，触发红色错误提示
      showToast('error', 'Error')
      console.log("e:", e);
    });
};

实操注意点：每次触发提示前必须先重置div的类名为基础toast类，否则上一次的样式类未清除，会导致不同场景的颜色样式互相干扰。

方案特性 #

• 全程仅使用1个DOM节点，完全符合单div实现的要求
• 所有样式切换通过修改类名完成，无需硬编码写死颜色、间距等样式属性
• 替代原生alert的阻断式弹窗体验，提示自动消失，不影响用户后续页面操作

内容的提问来源于stack exchange，提问作者Kumara