版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_25252769/article/details/86624198
描述:在页面(组件)中,只能有一个@Form.create(),意味着this.props.form唯一,如果一个页面有两个或者多个表单,提交其中一个,会携带其他表单数据,如果设置了required: true,影响其他表单提交,此时就需要新建组件。
情况一(子组件调用父组件方法):
//顶部搜索,点击搜索动作在子组件内部完成,需要把搜索条件传给父组件保存(分页需要)
import React, { PureComponent, Fragment } from 'react';
import moment from 'moment';
import { connect } from 'dva';
import { Input, Button ,Modal } from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import styles from './PatientManagement.less';
import stylesUtil from '../../utils/utils.less';
import { emptyVal, defaultPageSize } from '../../utils/utils';
@connect(({ patientManagement, loading ,}) => ({
patientManagement,
loading: loading.models.patientManagement,
submitting: loading.effects['form/submitAdvancedForm'],
}))
@Form.create()
export default class PatientManagement extends PureComponent {
state = {
searchVal:'' //分页需要该参数 ,请看分页那一篇博客
};
componentDidMount() {
}
setVal = (val) => { //子组件传值
this.setState({searchVal:val})
};
render() {
const { patientManagement: { data }, loading, form } = this.props;
return (
<PageHeaderLayout>
{//父组件传个方法过去,子组件接收,利用其传值}
<Search dispatch={this.props.dispatch} setVal={this.setVal}></Search>
</PageHeaderLayout>
);
}
}
//搜索组件
class Search extends PureComponent {
state ={
}
onValidateForm = (e) => {
const { validateFields } = this.props.form;
const { setVal } = this.props //重要
validateFields((err, values) => {
if (!err) {
setVal(values) //使用接收的方法 重要
this.props.dispatch({
type: 'patientManagement/getAllList',
payload: values,
});
}
});
}
render(){
const { getFieldDecorator, getFieldValue } = this.props.form;
return (
<Form onSubmit={this.onValidateForm} layout="inline">
<FormItem label="姓名">
{getFieldDecorator('name', {
rules: [{ required: false, message: '请输入' }],
})(
<Input placeholder="请输入姓名" />
)}
</FormItem>
<Button type="primary" htmlType="submit">查询</Button>
</Form>
);
}
}
Search = Form.create()(Search)//重要
情况二(父组件调用子组件方法):
//使用场景,在Modal 中,想点击Modal 确认按钮,控制子组件表单提交。
import React, { PureComponent, Fragment } from 'react';
import moment from 'moment';
import { connect } from 'dva';
import { Card, Tabs, Table, Form, Input, Button, DatePicker, message, Row, Col, Modal ,Carousel ,Icon ,Select ,Popconfirm, Divider } from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import BizGiveForm from '../../components/BizGiveForm';
import styles from '../../utils/utils.less';
import { emptyVal, defaultPageSize, fileHost, imageHost } from '../../utils/utils';
@connect(({ receipt, loading }) => ({
receipt,
loading: loading.models.receipt,
}))
@Form.create()
export default class Receipt extends PureComponent {
state = {
};
componentDidMount() {
}
getThis= (ref)=>{
this.myForm = ref //接收子组件this
}
okk =()=>{
this.myForm.test() //this.myForm 即 子组件
}
render() {
return (
<PageHeaderLayout>
<span onClick={this.okk}>点我666,我是Modal确认按钮</span>
<MyForm getThis={this.getThis} ></MyForm>
</PageHeaderLayout>
);
}
}
//组件
class MyForm extends PureComponent {
state ={
}
componentDidMount(){
this.props.getThis(this) //传this过去,是的父组件可以通过其调用方法
}
test = ()=>{
console.log('真的可以啊,6666,点我提交表单')
}
render(){
return (
<div>假如,我是一个表单</div>
);
}
}
MyForm = Form.create()(MyForm)