react-開發經驗分享-modal框內嵌form表單數據提交到父級頁面問題

Author：Mr.柳上原

• 付出不亞於任何的努力
• 願我們所有的努力，都不會被生活辜負
• 不忘初心，方得始終

ant框架裏，父級頁面的modal彈出框內嵌form表單時 提交按鈕是modal框自帶的確認和取消按鈕 需要對form表單進行關聯操作 父級頁面如果需要傳參給表單或獲取表單的填入數據時 必須使用Form.create()方法

// 子級頁面
// Ant formcreate 表單內置方法

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

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

  // 傳參 form 數據給父級部門生成組織架構數據
  const handleFormData = () => {
    // 每次打開彈窗時，初始化表單數據
    // 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位漢字、數字、英文！'}],
              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組件裏 傳遞需要的參數給該組件

// 父級頁面
// modal框輸入確認時獲取form表單的數據
 handleOk = async (formData) => {
    // 彈窗 form 傳來的數據
    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}
/>