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

1 先上图

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

2 贴代码

代码语言：javascript复制

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>
</Modal>


//Form表单的提交事件
const onFinish = values => {
        // console.log('Success:', values); 
        IsUpdatePassword.commit(session.environment,values.newpassword,values.oldpassword,(response, errors) => {
                if (errors) {
                    message.error(errors[0].message);
                } else {
                    //修改密码成功
                    message.success('修改密码成功!');
                    props.updatePasswordChange();
                }
            },
            (errors) => {
                message.error(errors.source.errors[0].message);
            })
        
};

//Form表单部分
return(
        <>
            <Form
                {...layout}
                name="密码修改"
                initialValues={{
                    remember: true,
                }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
            >
                <Form.Item
                    label="旧密码"
                    name="oldpassword"
                    rules={[
                    {
                        required: true,
                        message: '请输入旧密码!',
                    },
                    ]}
                >
                    <Input.Password />
                </Form.Item>

                <Form.Item
                    label="新密码"
                    name="newpassword"
                    rules={[
                    {
                        required: true,
                        message: '请输入新密码!',
                    },
                    ]}
                    hasFeedback
                >
                    <Input.Password />
                </Form.Item>

                <Form.Item
                    name="confirm"
                    label="确认新密码"
                    dependencies={['newpassword']}
                    hasFeedback
                    rules={[
                    {
                        required: true,
                        message: '请确认新密码!',
                    },
                    ({ getFieldValue }) => ({
                        validator(rule, value) {
                        if (!value || getFieldValue('newpassword') === value) {
                            return Promise.resolve();
                        }
                        return Promise.reject('两次新密码不一致!');
                        },
                    }),
                    ]}
                >
                    <Input.Password />
                </Form.Item>


                {/* <Form.Item {...tailLayout} name="remember" valuePropName="checked">
                    <Checkbox>Remember me</Checkbox>
                </Form.Item> */}

                <Form.Item {...tailLayout}>
                    <Row>
                        <Col span={12}>
                            <Button type="primary" htmlType="submit">
                            确认
                            </Button>
                        </Col>
                        <Col span={12}>
                            <Button onClick={props.updatePasswordChange}>
                            取消
                            </Button>
                        </Col>
                    </Row>
                </Form.Item>
            </Form>
        </>
    );
}

• 小结：

上面的代码你看起来可能有点乱，而且也运行不起来，那是肯定的！因为我只粘贴了整个项目的一部分。下面我来点睛：modal里面使用form表单并获取提交事件主要是使用了modal的**footer={null}**这个特性把外面的“确认取消按键隐藏”，然后使用我们自己的Form的“确定取消”按键，然后再通过Form的onFinish 事件来提交值和控制modal框的显示与消失。就ok了！

footer form null 表单 事件

0 人点赞