React中如何在Form表单提交成功后关闭Modal弹窗

问题核心原因 #

你已经把父组件的关闭方法handleClose正确传入子组件了，只需要在表单提交、接口请求成功的时机调用这个方法即可，你之前没调用所以不会自动关闭。

具体修改步骤（修改AddUserModal组件即可） #

1. 调整异步请求逻辑，成功后调用关闭方法 #

把原来的postUser方法改成异步写法，请求成功后执行handleClose，同时把表单重置逻辑也放到成功后，避免请求失败时表单内容被清空影响体验：

/** POST User  */
const postUser = async (values) => {
    try {
        const res = await axios.post('http://localhost:5000/portal/add-user', values)
        if (res.status === 200) {
            console.log(res.data); 
            addUserForm.resetFields();
            // 调用父组件传入的关闭方法，触发父组件更新state隐藏弹窗
            handleClose();
        }
    } catch (err) {
        console.error('新增用户失败：', err);
        // 此处可自行添加错误提示，比如antd的message.error提示用户操作失败
    }
};

2. 调整Modal的ok点击逻辑，适配异步操作 #

把onOk回调改成异步写法，等待表单校验和请求流程执行完成：

onOk={async () => {
    try {
        const values = await addUserForm.validateFields()
        await postUser(values);
    } catch (info) {
        console.log('Validate Failed:', info);
    }
}}

可选优化（更符合antd使用规范） #

你当前是通过父组件条件渲染控制Modal是否显示，也可以改成把显隐状态传入子组件，直接控制Modal的visible属性，避免偶发的渲染异常：

1. 父组件UserAdmin的render中修改调用方式，去掉条件渲染，传入visible属性：

// 原来的{show_user_modal && <AddUserModal handleClose={this.handleUserModalClose}/>}
// 改成下面的写法
<AddUserModal 
    visible={show_user_modal}
    handleClose={this.handleUserModalClose}
/>

2. 子组件AddUserModal中接收visible属性，绑定到Modal上：

function AddUserModal({handleClose, visible}){
    // 其他逻辑不变
    return(
        <Modal 
            title="Add User" 
            okText="Confirm" 
            visible={visible} // 替换原来的硬编码true
            onCancel={handleClose}
            // 其他属性不变
        >
        {/* 表单内容不变 */}
        </Modal>
    )
}

内容的提问来源于stack exchange，提问作者Colin Dawson