Modal的使用
Modal是一個使用頻率很高的組件
antd對于Modal提供的方法和屬性其實(shí)已經(jīng)很全面了,而日常用法在遇到一些特殊的情況的時候會覺得很麻煩磁椒，比如
1、一個組件有多個Modal玫芦，因?yàn)樾枰獀isible來控制是否顯示浆熔，state里面需要寫很多個visible。
2桥帆、一個組件里有多個Form,而且Form還放在Modal里面(這也是一個很常見的操作医增，彈出一個模態(tài)框然后填一些數(shù)據(jù)，然后提交)老虫。
3叶骨、Modal里面包含了Table+搜索框等內(nèi)容。
解決的思路很簡單
情況1的話使用Modal.confirm()或者M(jìn)odal.info()祈匙。根據(jù)是否需要提交操作選擇忽刽。
情況2天揖、3寫一個新的組件，所有Modal里組件的顯示跪帝、變化都在當(dāng)前組件控制今膊。只需要在父組件中調(diào)用并傳入visible,onOk等參數(shù)
具體實(shí)現(xiàn)代碼
方法一：直接彈出Modal(不需要visible控制，可支持提交伞剑、可支持關(guān)閉時銷毀)
優(yōu)點(diǎn)：
1斑唬、可以直接在方法中調(diào)用，不需要用visible控制顯示黎泣，使用destroy()關(guān)閉仰禀。
2勘究、可以不通過更新state來更新Modal册着，使用update()直接更新Modal胰伍。
缺點(diǎn)：
1、只有兩個按鈕衡便，不可設(shè)置更多的按鈕献起，適合只需要一個關(guān)閉，一個提交的情況镣陕。
[Modal.info/success/error/warning只有一個按鈕]谴餐。
showConfirm = () => {
const modal = Modal.confirm();
modal.update({
title: '標(biāo)題',
okText: '保存',//默認(rèn)為確認(rèn)
cancelText: '關(guān)閉',//默認(rèn)為取消
destroyOnClose: true,
//默認(rèn)false。默認(rèn)關(guān)閉后狀態(tài)不會自動清空, 如果希望每次打開都是新內(nèi)容需要設(shè)置true
content: (
<div>
//Modal內(nèi)其他組件
</div>
),
onOk() {
//調(diào)用點(diǎn)擊確定時回調(diào)的方法
},
onCancel() {
//點(diǎn)擊取消/遮罩層的時候回調(diào)的方法
modal.destroy();//這是調(diào)用Modal.confirm()后返回的引用呆抑，可以通過該引用更新和關(guān)閉彈窗
},
});
}
方法二：使用Modal+Form實(shí)現(xiàn)一個Modal子組件岂嗓。
優(yōu)點(diǎn)：不需要設(shè)置ref。直接在子組件里控制Form的變化鹊碍。由于變成了一個單獨(dú)組件厌殉，父組件里不用監(jiān)控Modal里其他組件的變化。
缺點(diǎn)：沒覺得有什么缺點(diǎn)侈咕。
class CreatePlan extends Component {
constructor() {
super();
}
onOk = () => {
this.props.form.validateFields((err, values) => {
if (err) return;//檢查Form表單填寫的數(shù)據(jù)是否滿足rules的要求
this.props.onOk(values);//調(diào)用父組件給的onOk方法并傳入Form的參數(shù)公罕。
})
};
onCancel = () => {
this.props.form.resetFields();//重置Form表單的內(nèi)容
this.props.onCancel()//調(diào)用父組件給的方法
};
render() {
const {getFieldDecorator} = this.props.form;
return (
<Modal
onOk={this.onOk}
onCancel={this.onCancel}
visible={this.props.visible}
title='新增自動升級'
>
<Form>
<FormItem label="升級計(jì)劃名稱">
{getFieldDecorator('planName', {
rules: [{required: true, message: '請?zhí)顚懮売?jì)劃名稱'}],
})(
<Input/>
)}
</FormItem>
<FormItem label="自動升級時間">
{getFieldDecorator('upgradeTime', {
initialValue: moment(),
rules: [{required: true, message: '請選擇自動升級時間'}],
})(
<DatePicker
style={{width: 300}}
showTime
format="YYYY-MM-DD HH:mm:ss"
placeholder="選擇自動升級時間"
/>
)}
</FormItem>
</Form>
</Modal>
)
}
}
export const CreatePlanFormModal = Form.create()(CreatePlan);
//以下父組件里的代碼
<CreatePlanModal
visible={this.state.createPlanModalVisible}
onOk={(values) => this.judgeCreatePlan(values)}
onCancel={this.handleCancel}
/>
