Author：Mr.柳上原

• 付出不亞于任何的努力
• 愿我們所有的努力契耿，都不會被生活辜負(fù)
• 不忘初心，方得始終

ant框架里隆判，父級頁面的modal彈出框內(nèi)嵌form表單時
提交按鈕是modal框自帶的確認(rèn)和取消按鈕
需要對form表單進(jìn)行關(guān)聯(lián)操作
父級頁面如果需要傳參給表單或獲取表單的填入數(shù)據(jù)時
必須使用Form.create()方法

// 子級頁面
// Ant formcreate 表單內(nèi)置方法

const Popup = Form.create()(props => {
  const { 
    form,
  ........  // 父級傳過來的數(shù)據(jù)
  } = props;

  // console.log(props);
  
  // 彈框 form 數(shù)據(jù)
  const dataForm = form.getFieldsValue();
  
  // Modal 彈出框確定按鈕的狀態(tài)
  let okButtonStatus = true;
  // 獲取輸入框的錯誤信息
  const dataFormError = form.getFieldsError();
  // 輸入正確判斷
  if(dataForm.name && !dataFormError.name) {
    okButtonStatus = false;
  }

  // 傳參 form 數(shù)據(jù)給父級部門生成組織架構(gòu)數(shù)據(jù)
  const handleFormData = () => {
    // 每次打開彈窗時二庵，初始化表單數(shù)據(jù)
    // form.resetFields();
    
    return dataForm;
  }

  return (
    <Modal width={690} title={btnStatus} maskClosable={false} visible={visible} destroyOnClose={true} okButtonProps={{disabled: okButtonStatus}}
      onOk={() => handleOk(handleFormData(), event)} onCancel={handleCancel}
    >
      <Row>
        <Col span={12}>
          <FormItem {...formItemLayout} label={(<span>名稱</span>)}>
            {form.getFieldDecorator('name', {
              rules: [{required: true, whitespace: true, pattern: /^[A-Za-z0-9\u4e00-\u9fa5]{2,18}$/g, message: '請輸入2~18位漢字箭启、數(shù)字乾颁、英文涂乌！'}],
              initialValue: btnStatus === '修改' ? organizationName : null,
            })(<Input style={{float: 'left'}} placeholder="請輸入名稱" />)}
          </FormItem>
        </Col>
        <Col span={12}>
          <FormItem {...formItemLayout} label={(<span>部門</span>)}>
            {form.getFieldDecorator('manager', {
              rules: [{required: true, whitespace: true, pattern: /^[A-Za-z0-9\u4e00-\u9fa5]{2,4}$/g, message: '請輸入2~4位漢字艺栈、英文英岭！'}],
              initialValue: user.profile.name,
            })(<StaffSelect organizationId={organizationId} user={user} />)} {/* 員工選擇框組件 */}
            
            {/* <Input style={{float: 'left'}} placeholder="請輸入部門" /> */}
          </FormItem>
        </Col>
      </Row>
    </Modal>
  )
})

export default Popup;

父級頁面引入的modal組件里
傳遞需要的參數(shù)給該組件

// 父級頁面
// modal框輸入確認(rèn)時獲取form表單的數(shù)據(jù)
 handleOk = async (formData) => {
    // 彈窗 form 傳來的數(shù)據(jù)
    console.log(formData);
}

{/* 彈窗組件 */}
<Popup visible={this.state.loading} btnStatus={this.state.btnStatus} handleCancel={this.handleCancel} handleOk={this.handleOk}
   organizationId={this.state.organizationId} user={this.props.user} organizationName=    
   {this.state.organizationName}
/>