前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >react-开发经验分享-modal框内嵌form表单数据提交到父级页面问题

react-开发经验分享-modal框内嵌form表单数据提交到父级页面问题

作者头像
Mr. 柳上原
发布2018-12-14 15:15:47
3.1K0
发布2018-12-14 15:15:47
举报

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}
/>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018.11.21 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档