React - 在表单提交时关闭模态

Question

React 新手。我想知道如何在触发 Form Submit 事件后关闭 Modal。

export default class UserAdmin extends Component {

constructor(props) {
    super(props);

    this.state = {
        show_user_modal : false
    }
}

// Handle User Modal
handleUserModalOpen = () => {
    this.setState({ show_user_modal: true});
}
handleUserModalClose = () => {
    this.setState({ show_user_modal: false});
}

render() {  
    const { show_user_modal } = this.state;
    return (
        <Content>
            <div className="site-layout-background">
            <div className="contentBody">
                <Button type="primary"onClick={this.handleUserModalOpen}>
                    Add User
                </Button>
                {show_user_modal && <AddUserModal handleClose={this.handleUserModalClose}/>}
            </div>
            </div>
        </Content>
    )
}
}

这可以完美地打开和关闭模态，并且提交在 addUserModal 中完美地工作，但是我不确定在完成后我应该如何关闭模态。我试图将 setState() 从父级设置为子级，但它甚至不想显示模态。任何帮助表示赞赏！

**添加 addUserModal 函数：

function AddUserModal({handleClose}){
    
    const [addUserForm] = Form.useForm();

    /** POST User  */
    const postUser = (values) => {
        axios.post('http://localhost:5000/portal/add-user', values)
            .then(res => {
                if (res.status === 200) {
                    console.log(res.data); 
            }
        })
    };

    return(
        <Modal title="Add User" okText="Confirm" visible={true} onCancel={handleClose}
            onOk={() => {
                addUserForm
                    .validateFields()
                    .then((values) => {
                        postUser(values);
                        addUserForm.resetFields();
                    })
                    .catch((info) => {
                        console.log('Validate Failed:', info);
                    });
                }}
            >
            <Form
                form={addUserForm}
                name="addUserForm"
                labelCol={{span: 5,}}
                wrapperCol={{span: 16,}}
                initialValues={{remember: false,}}
                >
            <Form.Item label="Username" name="username"
                rules={[
                {
                    required: true,
                    message: 'Please input a username!',
                },
                ]}
            >
                <Input />
            </Form.Item>

            <Form.Item label="Email" name="email"
                rules={[
                {
                    required: true,
                    message: 'Please input an email address',
                },
                ]}
                ><Input />
            </Form.Item>
            <Form.Item label="Password" name="password"
                rules={[
                {
                    required: true,
                    message: 'Please input a password',
                },
                ]}
                ><Input.Password />
            </Form.Item>
           </Form>
        </Modal>
        
    );

}
export default AddUserModal;

Answer 1

您的模态 visible 属性始终设置为 true。将 show_user_modal 变量传递给孩子并在模态 visible 状态下使用它。 {show_user_modal && <AddUserModal... 是不必要的

Answer 2

handleClose 正在呼叫 handleUserModalClose。我认为这个问题是另一回事。因此，您可以尝试在 API 调用的 .then 中调用 handleClose 并传递 visible prop

export default class UserAdmin extends Component {

constructor(props) {
    super(props);

    this.state = {
        show_user_modal : false
    }
}

// Handle User Modal
handleUserModalOpen = () => {
    this.setState({ show_user_modal: true});
}
handleUserModalClose = () => {
    this.setState({ show_user_modal: false});
}

render() {  
    const { show_user_modal } = this.state;
    return (
        <Content>
            <div className="site-layout-background">
            <div className="contentBody">
                <Button type="primary"onClick={this.handleUserModalOpen}>
                    Add User
                </Button>
                {show_user_modal && <AddUserModal visible={show_user_modal} handleClose={this.handleUserModalClose}/>}
            </div>
            </div>
        </Content>
    )
}
}

并在 AddUserModal 中使用它

function AddUserModal({visible, handleClose}){
    
    const [addUserForm] = Form.useForm();

    /** POST User  */
    const postUser = (values) => {
        axios.post('http://localhost:5000/portal/add-user', values)
            .then(res => {
                if (res.status === 200) {
                    console.log(res.data);
                    handleClose(); 
                }
        })
    };

    return(
        <Modal title="Add User" okText="Confirm" visible={visible} onCancel={handleClose}
            onOk={() => {
                addUserForm
                    .validateFields()
                    .then((values) => {
                        postUser(values);
                        addUserForm.resetFields();
                    })
                    .catch((info) => {
                        console.log('Validate Failed:', info);
                    });
                }}
            >
            <Form
                form={addUserForm}
                name="addUserForm"
                labelCol={{span: 5,}}
                wrapperCol={{span: 16,}}
                initialValues={{remember: false,}}
                >
            <Form.Item label="Username" name="username"
                rules={[
                {
                    required: true,
                    message: 'Please input a username!',
                },
                ]}
            >
                <Input />
            </Form.Item>

            <Form.Item label="Email" name="email"
                rules={[
                {
                    required: true,
                    message: 'Please input an email address',
                },
                ]}
                ><Input />
            </Form.Item>
            <Form.Item label="Password" name="password"
                rules={[
                {
                    required: true,
                    message: 'Please input a password',
                },
                ]}
                ><Input.Password />
            </Form.Item>
           </Form>
        </Modal>
        
    );

}
export default AddUserModal;