React JS实现表单提交成功弹模态框、定时关闭跳转页面方法

你需要实现的表单提交后弹模态框、展示5分钟自动关闭再跳转的逻辑，核心问题是原有代码在提交成功后直接执行路由跳转，没有预留模态框展示的时间窗口，也没有把模态框显隐逻辑和提交成功回调做绑定，以下是可直接复用的实现代码。

核心修改点 #

• 新增状态控制模态框显隐，用ref存储定时器ID避免内存泄漏
• 提交成功后先打开模态框，再启动5分钟（300000毫秒）定时器
• 定时器触发后先关闭模态框，再执行路由跳转
• 组件卸载时清除定时器，防止后台执行报错
• 移除模态框内会触发提前跳转的链接标签，替换为普通文本

具体代码实现 #

1. 表单页逻辑修改 #

import { useState, useEffect, useRef } from 'react';
// 保留你原有引入：axios、toast、Modal组件、history/useNavigate等

const FormPage = () => {
  // 控制模态框显隐
  const [showModal, setShowModal] = useState(false);
  // 存储定时器ID
  const redirectTimer = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    const data = events;
    const headers = {
      'Content-Type': 'multipart/form-data',
    }
    const formData = new FormData()
    formData.append('name', data?.selectedNames.event_name)
    formData.append('email', 'phpdevrohit@gmail.com')
    formData.append('start_date', data?.selectedDates.start_date)
    formData.append('end_date', data?.selectedDates.end_date)
    formData.append('city', data?.selectedCities.city)
    formData.append('state', data?.selectedCities.state)
    formData.append('event_size', data?.selectedEvents[0])
    formData.append('budget', data?.selectedBudgets)
    formData.append('type_of_event', "62982a548779cc4a00139ca2")

    axios.post(apiUrl, formData, { headers })
      .then(response => {
        const { data } = response
        if (data.status == '1') {
          // 提交成功先弹模态框，不要立刻跳转
          setShowModal(true);
          toast.success("Step 6 completed Successfully !");
          // 启动5分钟定时器
          redirectTimer.current = setTimeout(() => {
            setShowModal(false);
            // React Router v6 这里替换为 navigate('/CreatingEvent')
            history.push('/CreatingEvent');
          }, 5 * 60 * 1000);
        } else {
          toast.error("Something went wrong !");
          console.log(response.data);
        }
      }).catch(error => {
        console.error(error);
      });
  }

  // 组件卸载时清除定时器
  useEffect(() => {
    return () => {
      if (redirectTimer.current) clearTimeout(redirectTimer.current);
    }
  }, [])

  return (
    <div className="App">
      {/* 原有表单内容 */}
      <form onSubmit={handleSubmit}>
        {/* 你的表单字段保留 */}
        <button type="submit">提交</button>
      </form>

      {/* 模态框渲染 */}
      {showModal && <Modal />}
    </div>
  )
}

export default FormPage;

2. 模态框组件调整 #

把原来会触发跳转的a标签替换为普通文本，避免用户误点提前离开页面：

const Modal = () => {
  return(  
    <div>
      <section className="creating_event">
        <div className="container">
            <div className="crey8">
                <span className="btn btn-primary">Easy Events is Creating Your Event</span>
            </div>
        </div>
      </section>
    </div>
  )
}

export default Modal;

原有代码失效原因 #

• 提交成功后直接执行history.push，页面立刻卸载，模态框没有渲染机会
• 之前的模态框触发逻辑只绑定在测试按钮的onClick事件上，没有和接口请求成功的回调关联
• 没有设置定时器控制模态框展示时长和延迟跳转逻辑
• 模态框内的a标签默认会触发页面跳转，打断定时逻辑

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