Modal的使用
Modal是一個(gè)使用頻率很高的組件
antd對(duì)于Modal提供的方法和屬性其實(shí)已經(jīng)很全面了,而日常用法在遇到一些特殊的情況的時(shí)候會(huì)覺(jué)得很麻煩，比如
1、一個(gè)組件有多個(gè)Modal，因?yàn)樾枰獀isible來(lái)控制是否顯示，state里面需要寫很多個(gè)visible。
2、一個(gè)組件里有多個(gè)Form,而且Form還放在Modal里面(這也是一個(gè)很常見(jiàn)的操作，彈出一個(gè)模態(tài)框然后填一些數(shù)據(jù)，然后提交)。
3、Modal里面包含了Table+搜索框等內(nèi)容。

解決的思路很簡(jiǎn)單

• 情況1的話使用Modal.confirm()或者M(jìn)odal.info()。根據(jù)是否需要提交操作選擇。

• 情況2、3寫一個(gè)新的組件，所有Modal里組件的顯示、變化都在當(dāng)前組件控制。只需要在父組件中調(diào)用并傳入visible,onOk等參數(shù)

具體實(shí)現(xiàn)代碼

方法一：直接彈出Modal(不需要visible控制，可支持提交、可支持關(guān)閉時(shí)銷毀)
優(yōu)點(diǎn)：
1、可以直接在方法中調(diào)用，不需要用visible控制顯示，使用destroy()關(guān)閉。
2、可以不通過(guò)更新state來(lái)更新Modal，使用update()直接更新Modal。
缺點(diǎn)：
1、只有兩個(gè)按鈕，不可設(shè)置更多的按鈕，適合只需要一個(gè)關(guān)閉，一個(gè)提交的情況。
[Modal.info/success/error/warning只有一個(gè)按鈕]。

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)不會(huì)自動(dòng)清空, 如果希望每次打開都是新內(nèi)容需要設(shè)置true
    content: (
        <div>
         //Modal內(nèi)其他組件
        </div>
      ),
    onOk() {
    //調(diào)用點(diǎn)擊確定時(shí)回調(diào)的方法
    },
    onCancel() {
    //點(diǎn)擊取消/遮罩層的時(shí)候回調(diào)的方法
      modal.destroy();//這是調(diào)用Modal.confirm()后返回的引用，可以通過(guò)該引用更新和關(guān)閉彈窗
    },
  });
}

方法二：使用Modal+Form實(shí)現(xiàn)一個(gè)Modal子組件。
優(yōu)點(diǎn)：不需要設(shè)置ref。直接在子組件里控制Form的變化。由于變成了一個(gè)單獨(dú)組件，父組件里不用監(jiān)控Modal里其他組件的變化。
缺點(diǎn)：沒(méi)覺(jué)得有什么缺點(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='新增自動(dòng)升級(jí)'
      >
        <Form>
          <FormItem label="升級(jí)計(jì)劃名稱">
            {getFieldDecorator('planName', {
              rules: [{required: true, message: '請(qǐng)?zhí)顚懮?jí)計(jì)劃名稱'}],
            })(
              <Input/>
            )}
          </FormItem>
          <FormItem label="自動(dòng)升級(jí)時(shí)間">
            {getFieldDecorator('upgradeTime', {
              initialValue: moment(),
              rules: [{required: true, message: '請(qǐng)選擇自動(dòng)升級(jí)時(shí)間'}],
            })(
              <DatePicker
                style={{width: 300}}
                showTime
                format="YYYY-MM-DD HH:mm:ss"
                placeholder="選擇自動(dòng)升級(jí)時(shí)間"
              />
            )}
          </FormItem>
        </Form>
      </Modal>
    )
  }
}
export const CreatePlanFormModal = Form.create()(CreatePlan);

//以下父組件里的代碼
 <CreatePlanModal
    visible={this.state.createPlanModalVisible}
    onOk={(values) => this.judgeCreatePlan(values)}
    onCancel={this.handleCancel}
/>