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 在日常开发中,往往是前后端分离的,这个时候约定好一套接口标准,前后端各自独立开发,就不会被对方的技术难 ...
随机推荐
- js的微任务和宏任务
1.机制如下: 注意一点: 宏任务需要多次事件循环才能执行完,微任务是一次性执行完的: 2.宏任务macrotask: (事件队列中的每一个事件都是一个macrotask) 优先级:主代码块 > ...
- 【转载】Eclipse快捷键 10个最有用的快捷键
Eclipse中10个最有用的快捷键组合 一个Eclipse骨灰级开发者总结了他认为最有用但又不太为人所知的快捷键组合.通过这些组合可以更加容易的浏览源代码,使得整体的开发效率和质量得到提升. ...
- Elasticsearch数据迁移工具elasticdump工具
1. 工具安装 wget https://nodejs.org/dist/v8.11.2/node-v8.11.2-linux-x64.tar.xz tar xf node-v8.11.2-linux ...
- IIS 6的日志time-taken字段没有值的解决方案
1.IIS 6网站的活动日志格式选择“W3C 扩展日志文件格式”. 2.日志记录属性的高级选项卡,扩展属性列表勾选time-taken.
- flask下载文件中文IE,Edge,Safari文件名乱码
flask(0.11.2)+python3.6 兼容各个主流浏览器,已经过各种测试(chrome,firefox,safari,IE,Edge) quote是将文件名urlencode化,然后以适应E ...
- 时间模块和random模块
时间模块 和时间有关系的我们就要用到时间模块.在使用模块之前,应该首先导入这个模块. #常用方法 1.time.sleep(secs) (线程)推迟指定的时间运行.单位为秒. 2.time.time( ...
- ERP项目实施记录08
已经和软件商签订报价软件合同过去了2周,五一过后会有测试版本出来. 在整个接触过程中感觉开发方思路就是照葫芦画瓢,拿着这边的表单尽量往软件里搬,没有理清思路又急着赶进度:另外又要兼顾他们现有的&quo ...
- 【转】asp.net项目在IE11下出现“__doPostBack”未定义的解决办法
最近我们运营的网站有用户反馈在 IE 11 下<asp:LinkButton> 点击出现 "__doPostBack"未定义",经过一番google,终于知道 ...
- uploadify中文开发文档,解决php多图上传
图片上传好用插件有,比如 uploadify ueditor html5的各种ajax上传插件,大部分都是异步,返回只是true之类,有些时候需要上传图片需要一起上传,其实可以通过操作流程来避免这个 ...
- 深度学习中将类别标签映射到one_hot向量
有时我们的样本标签,都是标记从0开始直至到类别的个数.在模型训练的时候,这些标签需要变成one_hot向量,这样才能够跟softmax出来的概率做互熵损失,计算loss. 那么,映射的方法如下: de ...