一、表单元素操作事项

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,会通过组件定义绑定时候传输过去

子类不要有太多操作。

002-pro ant design 表单基本使用、state赋值数据父子传输的更多相关文章

  1. Ant Design 表单中getFieldDecorator、getFieldValue、setFieldValue用法

    Ant Design 表单中getFieldDecorator.getFieldValue.setFieldValue用法 一.getFieldDecorator getFieldDecorator是 ...

  2. 如何实现Ant design表单组件封装?

    目标:自己实现一个antd表单组件 先看下Ant Design官网上给出的表单组件用法: import React, { Component } from 'react' import { Form, ...

  3. ant Design表单验证笔记

    1.pattern正则验证 <Col md={12} sm={24}> <FormItem {...formItemLayout} label="班数"> ...

  4. ant design pro (十六)advanced 权限管理

    一.概述 原文地址:https://pro.ant.design/docs/authority-management-cn 权限控制是中后台系统中常见的需求之一,你可以利用我们提供的权限控制组件,实现 ...

  5. ant design pro (十三)advanced 错误处理

    一.概述 原文地址:https://pro.ant.design/docs/error-cn 二.详细 2.1.页面级报错 2.1.1.应用场景 路由直接引导到报错页面,比如你输入的网址没有匹配到任何 ...

  6. Ant Design Pro入门教程,安装,运行(V5 Typescript版)

    [前言] 找了很多Admin模板,最后还是看中了AntDesignPro这个阿里巴巴开源的Admin框架,长这样(还行吧,目前挺主流的): 官网地址:https://pro.ant.design/in ...

  7. ANT DESIGN PRO 脚手架.... 懒人福音

    早上在用蚂蚁组件,看到一个红红的 PRO , 什么鬼,点了看. https://pro.ant.design/index-cn 一脸懵逼, 中台前端??? 预览再看: 后台管理的demo , 脚手架  ...

  8. 阿里开源项目之Ant Design Pro

    本篇文章主要包含的内容有三个方面. 第一.Ant Design Pro简介; 第二.Ant Design Pro能做什么; 第三.初步使用; 我相信通过这三个方面的讲解能让你大概知道Ant Desig ...

  9. ant design pro (十五)advanced 使用 API 文档工具

    一.概述 原文地址:https://pro.ant.design/docs/api-doc-cn 在日常开发中,往往是前后端分离的,这个时候约定好一套接口标准,前后端各自独立开发,就不会被对方的技术难 ...

随机推荐

  1. Android UI布局之RelativeLayout

    RelativeLayout是一个相对布局类. 首先RelativeLayout是一个容器,它里边的元素,如Buttonbutton等的位置是依照相对位置来计算的,比如,有两个Buttonbutton ...

  2. 16解释器模式Interpreter

    一.什么是解释器模式 Interpreter模式也叫解释器模式,是行为模式之一,它 是一种特殊的设计模式,它建立一个解释器,对于特定 的计算机程序设计语言,用来解释预先定义的文法.简 单地说,Inte ...

  3. Nuxt.js项目实战

    感悟 经过几个周六周日的尝试,终于解决了服务端渲染中的常见问题,当SEO不在是问题的时候,或许才是我们搞前端的真正的春天,其中也遇到了一些小坑,Nuxt.js官方还是很给力的,提issue后很积极的给 ...

  4. MySql表结构修改详解

    修改表的语法=========================增加列[add 列名]=========================①alter table 表名 add 列名 列类型 列参数[加的 ...

  5. vba 调用 countif 函数问题

    源数据是A1:G18,需求是在K列显示A1:A18中各单元格重复出现的次数.在L列中是用countif函数直接计算的, Private Sub test() Dim rng As Range, i A ...

  6. day_5.04py

    Pycharm默认不依赖系统环境下安装的requests 打开 File->Settings->Project:你的Project名 点击“+”号 搜索requests并安装 长见识了 # ...

  7. Thinkphp 中的自动验证 上一篇有例子

    说明,只要定义了Model,在任何地方调用,都会进行验证.很方便. 必须是D方法,才会有效.M方法不会触发自动验证. 说明:这里没练习静态自动验证:如果用到静态验证首先自定义一个控制器,再在Model ...

  8. iis和tomcat(整合)

    ---恢复内容开始---   (一)   为什么要把IIS.Tomcat整合到一起?假如你遇到这种情况,你开发了一个javaweb项目要部署到服务器上,但是这个服务器上已经部署了asp.asp.net ...

  9. el表达式用==和eq的注意事项

    eq和==一般是一样的,但是注意el表达式中使用==判断的时候不允许有空格,例如: ${job.jobName==requestScope.user.job.jobName?"selecte ...

  10. 在VMware中使用Nat方式设置静态IP, 宿主机可以 ssh

    坑很多:  麻痹,  主要还是要先 防火墙关掉,永久关掉.  seliux 也永久关掉. 临时关闭防火墙:systemctl stop firewalld    开机不启动: systemctl di ...