react+antd组件 modal里面包裹使用form表单并获取提交事件

原创

于 2022-05-07 12:47:09 发布 · 2.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

本文介绍了如何在Ant Design的Modal组件中嵌入Form表单，用于实现密码修改功能。通过控制Modal的显示与隐藏，结合Form的onFinish事件处理表单提交，确保旧密码、新密码及确认新密码的验证，并在成功修改后关闭Modal并给出反馈信息。

1 先上图

在这里插入图片描述

我这里是点击“修改密码”那个按钮，然后跳到了modal框。（大家这里可以随便写一个按钮，然后给他一个点击事件让他可以显示modal框就好了，我这里着重讲解标题的内容）

2 贴代码

const [visible, setVisible] = useState(false);//antd 控制modal是否显示
const showMoal=()=>{
   
   
    // console.log("showMoal")
    setVisible(true);
}
const handleCancel = e => {
   
   
// console.log("cancel:",e);
setVisible(false);
};

function updatePasswordChange(){
   
   
    // console.log("0000");
    setVisible(false);
}

//Modal框
 <Modal
     title="密码修改"
     visible={
   
   visible}
     onCancel={
   
   handleCancel}
     footer={
   
   null}
 >
     
     <UpdatePassword updatePasswordChange={
   
   updatePasswordChange}></UpdatePassword>
<

最低0.47元/天解锁文章