在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;
在上述示例中,弹出窗口组件Popup
接受message
和onClose
作为参数,分别用于显示成功/错误消息和关闭弹出窗口。父组件ParentComponent
中使用useState
来创建状态变量showPopup
和message
,分别用于控制弹出窗口的显示与隐藏以及存储成功/错误消息内容。在表单提交处理函数handleSubmit
中,根据提交结果设置成功/错误消息内容,并将弹出窗口的显示状态设置为true。最后,在父组件中根据showPopup
的值决定是否显示弹出窗口,并将成功/错误消息传递给弹出窗口组件。
这是一个简单的示例,你可以根据实际需求进行修改和扩展。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云