ant design pro 组件通信

最新推荐文章于 2023-03-16 17:58:38 发布

原创最新推荐文章于 2023-03-16 17:58:38 发布 · 2.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#ant design pro #组件通信

ant design pro 专栏收录该内容

21 篇文章

订阅专栏

本文详细解析了Ant Design中Form组件的高级用法，包括如何在一个页面中正确处理多个表单，避免数据混淆，以及如何在父组件与子组件间通过props和回调函数进行数据传递和状态同步，确保表单数据的准确提交。

描述：在页面（组件）中，只能有一个@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)