如何在表单提交成功时打开弹出模式并在 2 分钟后隐藏弹出窗口并重定向到反应 js 中的另一个页面？

Question

你好我想在提交表单时打开弹出模式如果表单提交成功然后弹出模式打开并在 5 分钟内隐藏该模式并重定向到 React JS 中的另一个页面。我该如何执行此功能。请帮助完成此功能。下面我分享我的代码。

提交代码：

 const handleSubmit = (e) => {
    e.preventDefault();
    let data = events;
    const headers = {
      // 'Content-Type': 'application/json',
      'Content-Type': 'multipart/form-data',
      //  'Authorization': token
    }
    console.log('fnn', data);
    let 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")
    //props.resetEvents();
    axios.post(apiUrl, formData, { headers: headers })
     
      .then(response => {
        const { data } = response
        console.log(data)
        if (data.status == '1') {
          history.push('/CreatingEvent');
          toast.success("Step 6 completed Successfully !");
        }
        else {
          toast.error("Something went wrong !");
          console.log(response.data);
          return
        }


      }).catch(error => {

        throw (error);
      });
  }

**Modal Code:**

    return(  
    <div>
       
       <section className="creating_event">
            <div className="container">
                <div className="crey8">
                    <a href="GetStarted" className="btn btn-primary" type="button">Easy Events is Creating Your Event</a>
                </div>
            </div>
       </section>

    </div>
    
    )

我试图通过使用 onclick 钩子来调用它，但无法达到预期的结果。我这样试过。

<div className="App">
    <h1>Popup Modal</h1>
    <button onClick={openModal}>Open Modal</button>
    {showModal ? <Modal setShowModal={setShowModal} /> : null}
</div>

Answer 1

使用状态变量来控制可见性。然后监听该状态变量的变化。如果它更改为 true，则启动 setTimeout 以隐藏模式。请参阅 CodeSandbox 示例。

例子

import { useEffect, useState } from "react";
import "./styles.css";

const modalDisplayTime = 1000; // 1 second

export default function App() {
  const [showModal, setShowModal] = useState(false);

  useEffect(() => {
    let timeout;
    if (showModal) {
      timeout = setTimeout(() => {
        setShowModal(false);
        // history.push('/newpage')
      }, modalDisplayTime);
    }
    return () => clearTimeout(timeout);
  }, [showModal]);

  const handleClick = () => {
    setShowModal(true);
  };

  return (
    <div className="App">
      <button onClick={handleClick}>Show Modal</button>
      {showModal && <div>This is the Modal</div>}
    </div>
  );
}

如何在表单提交成功时打开弹出模式并在 2 分钟后隐藏弹出窗口并重定向到反应 js 中的另一个页面？

How to open pop up modal when form submit sucessfully and hide pop after 2 mintues and redirect to another page in react js?

reactjs