002-pro ant design 表單基本使用、state賦值數據父子傳輸

1、表單元素操做事項

一、form 默認在prop中存在：this.props.form，直接使用便可

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

三、賦值：form.setFieldsValue({ categoryId: select });

四、取值校驗：

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

2、state賦值

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

二、對象追加值：

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

關於：Object.assign，能夠參看：https://www.cnblogs.com/bjlhx/p/10288760.html

三、父子組件傳輸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;

View Code

過程：子類方法onChangeCategoryId控制父類方法changeGetHuanJie操做state，state設置了huanjieData，會經過組件定義綁定時候傳輸過去

子類不要有太多操做。