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框<Modaltitle="密码修改"visible={visible}onCancel={handleCancel}footer={null}><UpdatePassword updatePasswordChange={updatePasswordChange}></UpdatePassword></Modal>//Form表单的提交事件const onFinish = values => {// console.log('Success:', values); mit(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.Itemlabel="旧密码"name="oldpassword"rules={[{required: true,message: '请输入旧密码!',},]}><Input.Password /></Form.Item><Form.Itemlabel="新密码"name="newpassword"rules={[{required: true,message: '请输入新密码!',},]}hasFeedback><Input.Password /></Form.Item><Form.Itemname="confirm"label="确认新密码"dependencies={['newpassword']}hasFeedbackrules={[{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了！