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}
/>