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