描述:在页面(组件)中,只能有一个@Form.create(),意味着this.props.form唯一,如果一个页面有两个表单,提交其中一个,另一个也会提交,然而你只想提交一个。
解决方法:
1.如果表单多且复杂,请单独自定义一个页面(组件),我这是偷懒直接在页面自定义一个Search 组件(不推荐)
不完整代码(不必要的我删了):
import React, { PureComponent, Fragment } from 'react';
import moment from 'moment';
import { connect } from 'dva';
import { Card, Table, Tabs, Form, Col, Row, Input, Select, Button ,Divider,Modal ,DatePicker ,Icon ,Upload,Popconfirm} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import styles from './PatientManagement.less';
import stylesUtil from '../../utils/utils.less';
import { emptyVal, defaultPageSize } from '../../utils/utils';
const FormItem = Form.Item;
const TabsPane = Tabs.TabPane;
const { Option } = Select;
@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>
<Card bordered={false}>
{//父组件传个方法过去,子组件接收,利用其传值}
<Search e='1' dispatch={this.props.dispatch} setVal={this.setVal}></Search>
</Card>
</PageHeaderLayout>
);
}
}
//搜索组件
class Search extends PureComponent {
state ={
}
onValidateForm = (e) => {
const { validateFields } = this.props.form;
const { setVal } = this.props //重要
validateFields((err, values) => {
if (!err) {
setVal(values) //使用接收的方法 重要
if(values.startDate){
values.startDate=values.startDate.format('YYYY-MM-DD');
}
if(values.endDate){
values.endDate=values.endDate.format('YYYY-MM-DD');
}
this.props.dispatch({
type: 'patientManagement/getAllList',
payload: values,
});
}
});
}
render(){
const { e } = this.props
const { getFieldDecorator, getFieldValue } = this.props.form;
return (
<Form onSubmit={()=>{this.onValidateForm(e)}} layout="inline">
<Row gutter={{ md: 9, lg: 24, xl: 48 }}>
<Col md={6} sm={24}>
<FormItem label="开始时间">
{getFieldDecorator('startDate', {
rules: [{ required: false, message: '请输入' }],
})(
<DatePicker onChange={this.handleTime} />
)}
</FormItem>
</Col>
<Col md={6} sm={24}>
<FormItem label="结束时间">
{getFieldDecorator('endDate', {
rules: [{ required: false, message: '请输入' }],
})(
<DatePicker onChange={this.handleTime} />
)}
</FormItem>
</Col>
<Col md={2} sm={24}>
<Button type="primary" htmlType="submit">查询</Button>
</Col>
</Row>
</Form>
);
}
}
Search = Form.create()(Search)//重要