002-pro ant design 表单基本使用、state赋值数据父子传输

一、表单元素操作事项

1、form 默认在prop中存在：this.props.form，直接使用即可

2、重置：this.props.form.resetFields();

3、赋值：form.setFieldsValue({ categoryId: select });

4、取值校验：

    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        dispatch({
          type: 'codeSync/actionRecycleInfo',
          payload: values,
          callback: response => {
            this.showChangeAction(response);
          },
        });
      }
    });

二、state赋值

1、普通赋值：  this.setState({ huanjieData: response.data });

2、对象追加值：

     this.setState(
       Object.assign(this.state.changeData, { ...data }),
       () => {
         console.log(11, this.state);
       },
     );

关于：Object.assign，可以参看：https://www.cnblogs.com/bjlhx/p/10288760.html

3、父子组件传输state

import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import {
  Row,
  Col,
  Card,
  Form,
  Input,
  Button,
  Modal,
  message,
  Badge,
  Dropdown,
  Menu,
  Icon,
  Select,
  Table,
  Divider,
  Tag,
  Radio,
} from 'antd';
import styles from './SyncCode.less';

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const { Option } = Select;
const { TextArea } = Input;

// 批次数据新增弹层
const SyncCodeChangeTraceAccount = Form.create()(props => {
    //接收父类参数
  const { showVisible, changeGetHuanJie, handleCategory, form, handleVisibleAction, itemData,huanjieData, templates } = props;

  // 创建批次确定提交功能
  const okHandleAdd = () => {
    alert('提交表单:' + JSON.stringify(itemData));
  };

  const onChangeTraceAccount = e => {
    const traceAccount = event.target.value;
    if (itemData.dataProvideTraceAccount == traceAccount) {
      message.error('替换供应商不能是当前账号');
      event.target.value = '';
    } else {
      //获取 模板
      const trace = { traceAccount: traceAccount };
      const select = handleCategory(trace);
      //select 参数组装
      form.setFieldsValue({ categoryId: select });
      changeGetHuanJie({ traceAccount: traceAccount, syncType: 2, categoryId: null });
    }
  };

  const onChangeCategoryId = (value, options) => {
    changeGetHuanJie({ categoryId: value });
  };

  const onChangeBatch = event => {
    changeGetHuanJie({ batchCode: event.target.value });
  };

  return (
    <Modal
      destroyOnClose
      title="变更追溯环节"
      onOk={okHandleAdd}
      visible={showVisible}
      // className={styles.batc、hModel}
      onCancel={() => handleVisibleAction()}
      width="80%"
      okText="确认变更"
    >
        <Table
          columns={columns2}
          dataSource={huanjieData}
          rowKey="dataType"
          locale={{ emptyText: '暂无数据' }}
          pagination={false}
        />
    </Modal>
  );
});

@connect(({ codeSync, loading }) => ({
  codeSync,
  // loading: loading.models.sweepcode,
}))
@Form.create()
class SyncCode extends PureComponent {
  // 初始化状态值
  state = {
    huanjieData: [],
  };

  // 改变 获取环节信息
  changeGetHuanJie = data => {
    return this.handleHuanJie(data);
  };
  handleHuanJie = (changeData) => {
    const { dispatch } = this.props;
      dispatch({
        type: 'codeSync/actionQueryTacheList',
        payload: changeData,
        callback: response => {
          if (response.code == 20000) {
            this.setState({ huanjieData: response.data });
          } else {
            Modal.error({
              title: '查询失败',
              content: response.msg,
            });
          }
        },
    }
  };

  // 渲染批次数据列表界面
  render() {
    const {
      form: { getFieldDecorator },
    } = this.props;

    const {huanjieData, itemData,changeVisible} = this.state;
    //传输 父类方法到子类
    const parentMethods = {
      changeGetHuanJie: this.changeGetHuanJie,
      handleCategory: this.handleCategory,
      handleVisibleAction: this.showChangeAction,
    };

    return (
      <div style={{ background: '#ECECEC', padding: '30px' }}>
        <Table
          {...parentMethods}
          itemData={itemData}
          huanjieData={huanjieData}
          showVisible={changeVisible}
        />
      </div>
    );
  }
}

export default SyncCode;

过程：子类方法onChangeCategoryId控制父类方法changeGetHuanJie操作state，state设置了huanjieData，会通过组件定义绑定时候传输过去

子类不要有太多操作。