关闭表单提交的弹出窗口，并在reactjs中的父组件上显示成功/错误消息

// 弹出窗口组件
import React from 'react';

const Popup = ({ message, onClose }) => {
  return (
    <div className="popup">
      <div className="popup-content">
        <p>{message}</p>
        <button onClick={onClose}>关闭</button>
      </div>
    </div>
  );
};

export default Popup;

// 父组件
import React, { useState } from 'react';
import Popup from './Popup';

const ParentComponent = () => {
  const [showPopup, setShowPopup] = useState(false);
  const [message, setMessage] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    
    // 表单提交处理逻辑
    // ...

    // 假设提交结果为成功
    const successMessage = '提交成功！';
    setMessage(successMessage);
    setShowPopup(true);
  };

  const handleClosePopup = () => {
    setShowPopup(false);
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        {/* 表单内容 */}
        {/* ... */}
        <button type="submit">提交</button>
      </form>

      {showPopup && <Popup message={message} onClose={handleClosePopup} />}
    </div>
  );
};

export default ParentComponent;