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,会通过组件定义绑定时候传输过去
子类不要有太多操作。
002-pro ant design 表单基本使用、state赋值数据父子传输的更多相关文章
- Ant Design 表单中getFieldDecorator、getFieldValue、setFieldValue用法
Ant Design 表单中getFieldDecorator.getFieldValue.setFieldValue用法 一.getFieldDecorator getFieldDecorator是 ...
- 如何实现Ant design表单组件封装?
目标:自己实现一个antd表单组件 先看下Ant Design官网上给出的表单组件用法: import React, { Component } from 'react' import { Form, ...
- ant Design表单验证笔记
1.pattern正则验证 <Col md={12} sm={24}> <FormItem {...formItemLayout} label="班数"> ...
- ant design pro (十六)advanced 权限管理
一.概述 原文地址:https://pro.ant.design/docs/authority-management-cn 权限控制是中后台系统中常见的需求之一,你可以利用我们提供的权限控制组件,实现 ...
- ant design pro (十三)advanced 错误处理
一.概述 原文地址:https://pro.ant.design/docs/error-cn 二.详细 2.1.页面级报错 2.1.1.应用场景 路由直接引导到报错页面,比如你输入的网址没有匹配到任何 ...
- Ant Design Pro入门教程,安装,运行(V5 Typescript版)
[前言] 找了很多Admin模板,最后还是看中了AntDesignPro这个阿里巴巴开源的Admin框架,长这样(还行吧,目前挺主流的): 官网地址:https://pro.ant.design/in ...
- ANT DESIGN PRO 脚手架.... 懒人福音
早上在用蚂蚁组件,看到一个红红的 PRO , 什么鬼,点了看. https://pro.ant.design/index-cn 一脸懵逼, 中台前端??? 预览再看: 后台管理的demo , 脚手架 ...
- 阿里开源项目之Ant Design Pro
本篇文章主要包含的内容有三个方面. 第一.Ant Design Pro简介; 第二.Ant Design Pro能做什么; 第三.初步使用; 我相信通过这三个方面的讲解能让你大概知道Ant Desig ...
- ant design pro (十五)advanced 使用 API 文档工具
一.概述 原文地址:https://pro.ant.design/docs/api-doc-cn 在日常开发中,往往是前后端分离的,这个时候约定好一套接口标准,前后端各自独立开发,就不会被对方的技术难 ...
随机推荐
- Android UI布局之RelativeLayout
RelativeLayout是一个相对布局类. 首先RelativeLayout是一个容器,它里边的元素,如Buttonbutton等的位置是依照相对位置来计算的,比如,有两个Buttonbutton ...
- 16解释器模式Interpreter
一.什么是解释器模式 Interpreter模式也叫解释器模式,是行为模式之一,它 是一种特殊的设计模式,它建立一个解释器,对于特定 的计算机程序设计语言,用来解释预先定义的文法.简 单地说,Inte ...
- Nuxt.js项目实战
感悟 经过几个周六周日的尝试,终于解决了服务端渲染中的常见问题,当SEO不在是问题的时候,或许才是我们搞前端的真正的春天,其中也遇到了一些小坑,Nuxt.js官方还是很给力的,提issue后很积极的给 ...
- MySql表结构修改详解
修改表的语法=========================增加列[add 列名]=========================①alter table 表名 add 列名 列类型 列参数[加的 ...
- vba 调用 countif 函数问题
源数据是A1:G18,需求是在K列显示A1:A18中各单元格重复出现的次数.在L列中是用countif函数直接计算的, Private Sub test() Dim rng As Range, i A ...
- day_5.04py
Pycharm默认不依赖系统环境下安装的requests 打开 File->Settings->Project:你的Project名 点击“+”号 搜索requests并安装 长见识了 # ...
- Thinkphp 中的自动验证 上一篇有例子
说明,只要定义了Model,在任何地方调用,都会进行验证.很方便. 必须是D方法,才会有效.M方法不会触发自动验证. 说明:这里没练习静态自动验证:如果用到静态验证首先自定义一个控制器,再在Model ...
- iis和tomcat(整合)
---恢复内容开始--- (一) 为什么要把IIS.Tomcat整合到一起?假如你遇到这种情况,你开发了一个javaweb项目要部署到服务器上,但是这个服务器上已经部署了asp.asp.net ...
- el表达式用==和eq的注意事项
eq和==一般是一样的,但是注意el表达式中使用==判断的时候不允许有空格,例如: ${job.jobName==requestScope.user.job.jobName?"selecte ...
- 在VMware中使用Nat方式设置静态IP, 宿主机可以 ssh
坑很多: 麻痹, 主要还是要先 防火墙关掉,永久关掉. seliux 也永久关掉. 临时关闭防火墙:systemctl stop firewalld 开机不启动: systemctl di ...