看完这篇不要告诉我不会封装ant design弹框组件了

我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号关注前端小歌谣

获取前端学习知识

1设计需求 封装一个弹框组件 直接调用接口

2技术栈 ant design+react

设计第一步

绘制样式

 <ModalmaskClosable={false}visible={visible}title={'签收协议'}onOk={this.handleSignFor}onCancel={() => this.onOpenOrClose(false)}width={800}destroyOnClose><Form{...formItemLayout}// className={styles}style={{ paddingTop: '0px' }}wrapperCol={{ span: 16 }}><Form.Item label="签收结果">{getFieldDecorator('signInResult', 
{initialValue: ResultQsList.length > 0 ?ResultQsList[1].key : '',rules: [{ required: true, message: '请选择签收结果' }],})(<Radio.Group>{ResultQsList.map((item) => {return (<Radio value={item.key} key={item.key}>{item.value}</Radio>);})}</Radio.Group>)}</Form.Item><Form.Item label="甲方名称">{getFieldDecorator('firstPartyName', {rules: [{ required: true, message: '甲方名称不能为空' }],})(<Select style={{ width: '100%' }}>{test.map((item) => (<Select.Option key={item.key} value={item.key}>{item.value}</Select.Option>))}</Select>)}</Form.Item><Form.Item label="乙方名称">{getFieldDecorator('secondPartyName', {rules: [{ required: true, message: '乙方名称不能为空' }],})(<Select style={{ width: '100%' }}>{test.map((item) => (<Select.Option key={item.key} value={item.key}>{item.value}</Select.Option>))}</Select>)}</Form.Item><Form.Item label="归档编号">{getFieldDecorator('archivedEncode', {initialValue: 1,rules: [{ required: true, message: '请输入归档编号' }],})(<InputNumberformatter={(value) => `HZ ${value}`}style={{ width: '100%' }}placeholder="请输入"onChange={this.handleArchivedEncode}/>)}</Form.Item>{/* 控制验证的规则 */}<Form.Item label="原因">{getFieldDecorator('signInResson',form.getFieldsValue().signStatus === QS_TESHU ||form.getFieldsValue().signStatus === JS_TESHU? {initialValue: '',rules: [{ required: true, message: '请填写原因' }],}: { rules: [{ message: '请填写原因' }] })(<Select style={{ width: '100%' }}>{ResultYyList.map((item) => (<Select.Option key={item.key} value={item.key}>{item.value}</Select.Option>))}</Select>)}</Form.Item><Form.Item label="备注"><div>{getFieldDecorator('signInRemark', { rules: [{ message: '请填写备注'}] })(<TextArea allowClear placeholder="请填写备注" autoSize={{ minRows: 3}} />)}</div></Form.Item></Form></Modal>

 这样就渲染了如图所示的样式

 设计点二 当正常签收的时候原因为非必填 其他两种情况为必填

 形成效果正常签收的时候原因为非必填 其他两种情况为必填

 3设计思路 这样就形成了判断

这个时候 后台接口是要传code

handleSignFor = () => {//获取到所有的form表单的值const formData = this.props.form.getFieldsValue();console.log(formData, 'formData');//参数拼接const param = {...formData,code: this.state.code,archivedEncode: `HZ${formData.archivedEncode}`,};console.log(param);this.props.dispatch({type: 'agreement/signIn',payload: param,callback: (res) => {if (res.returnCode === 0) {message.success('协议签收成功');this.onOpenOrClose(false);this.props.getContractList(); //重新获取数据}},});};

这段代码

进行接口调用

 4设计思路 父子组件调用

  <SignForModalonRef={(ref) => {this.SignForModal = ref;}}getContractList={this.getCourseList}/>

 签收的时候直接onref调用子组件的方法

  //签收handleSignFor = (row, isBatch) => {this.SignForModal.onOpenOrClose(true, row);};

所以 封装总代码

import React, { Component } from 'react';
import { connect } from 'dva';
import { Modal, Form, Input, Row, Col, Radio, Button,message, InputNumber, Select } from 'antd';
import { formItemLayout } from '@/common/config';
import { QS_TESHU, JS_TESHU } from './data.js';
// import styles from './../../index.less';
import { CONTRACT_CHECKPASS, CONTRACT_CHECKNOT } 
from '@/utils/dictionaryInterface';
const { TextArea } = Input;
//修改数据请求 接口调用请求
@Form.create()
@connect(({ agreement, menu, loading }) => ({menu,agreement,
}))
class SignForModal extends Component {//控制弹窗的开启state = { visible: false, code: '' };componentDidMount() {this.props.onRef && this.props.onRef(this);//父组件通过onRef访问子组件的方法，这里要写上这句话，否则无法访问}//显示或隐藏modalonOpenOrClose = (show, row) => {this.setState({ visible: show });show && this.setState({ code: row.code });};handleArchivedEncode = (value) => {};//点击确定handleSignFor = () => {//获取到所有的form表单的值const formData = this.props.form.getFieldsValue();console.log(formData, 'formData');//参数拼接const param = {...formData,code: this.state.code,archivedEncode: `HZ${formData.archivedEncode}`,};console.log(param);this.props.dispatch({type: 'agreement/signIn',payload: param,callback: (res) => {if (res.returnCode === 0) {message.success('协议签收成功');this.onOpenOrClose(false);this.props.getContractList(); //重新获取数据}},});};render() {const test = [{ key: '1', value: '公司' }];const { visible } = this.state;const {agreement: { ResultQsList = [], ResultYyList = [] },// contractList: { contractCollectionStatusList, 
contractSettlementStatusList, checkStatusList },form,form: { getFieldDecorator },} = this.props;return (<ModalmaskClosable={false}visible={visible}title={'签收协议'}onOk={this.handleSignFor}onCancel={() => this.onOpenOrClose(false)}width={800}destroyOnClose><Form{...formItemLayout}// className={styles}style={{ paddingTop: '0px' }}wrapperCol={{ span: 16 }}><Form.Item label="签收结果">{getFieldDecorator('signInResult', {initialValue: ResultQsList.length > 0 ? ResultQsList[1].key : '',rules: [{ required: true, message: '请选择签收结果' }],})(<Radio.Group>{ResultQsList.map((item) => {return (<Radio value={item.key} key={item.key}>{item.value}</Radio>);})}</Radio.Group>)}</Form.Item><Form.Item label="甲方名称">{getFieldDecorator('firstPartyName', {rules: [{ required: true, message: '甲方名称不能为空' }],})(<Select style={{ width: '100%' }}>{test.map((item) => (<Select.Option key={item.key} value={item.key}>{item.value}</Select.Option>))}</Select>)}</Form.Item><Form.Item label="乙方名称">{getFieldDecorator('secondPartyName', {rules: [{ required: true, message: '乙方名称不能为空' }],})(<Select style={{ width: '100%' }}>{test.map((item) => (<Select.Option key={item.key} value={item.key}>{item.value}</Select.Option>))}</Select>)}</Form.Item><Form.Item label="归档编号">{getFieldDecorator('archivedEncode', {initialValue: 1,rules: [{ required: true, message: '请输入归档编号' }],})(<InputNumberformatter={(value) => `HZ ${value}`}style={{ width: '100%' }}placeholder="请输入"onChange={this.handleArchivedEncode}/>)}</Form.Item>{/* 控制验证的规则 */}<Form.Item label="原因">{getFieldDecorator('signInResson',form.getFieldsValue().signInResult === QS_TESHU ||form.getFieldsValue().signInResult === JS_TESHU? {initialValue: '',rules: [{ required: true, message: '请填写原因' }],}: { rules: [{ message: '请填写原因' }] })(<Select style={{ width: '100%' }}>{ResultYyList.map((item) => (<Select.Option key={item.key} value={item.key}>{item.value}</Select.Option>))}</Select>)}</Form.Item><Form.Item label="备注"><div>{getFieldDecorator('signInRemark',{ rules: [{ message: '请填写备注' }] })(<TextArea allowClear placeholder
="请填写备注" autoSize={{ minRows: 3 }} />)}</div></Form.Item></Form></Modal>);}
}export default SignForModal;

我是歌谣 所以总的实现了一个父子传值 子组件给个方法回调给父getContractList

回调用来重新刷新列表 直接onref调用组件的方法进行处理数据 状态判断外部定义一个data.js引入 控制是否必填 接口调用参数直接拼接使用 秒呀

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/406206.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

mysql 报错3534_win7下安装MYSQL报错：MYSQL 服务无法启动的3534问题

mysql 报错3534_win7下安装MYSQL报错：MYSQL 服务无法启动的3534问题

win7下安装MYSQL,只到“net start mysql”这一步报错:3534的错误&#xff1a;是直接官网下载的压缩文件.不是安装文件.解决方法:1:环境变量PATH添加完成(例如&#xff1a;h:\mysql\\bin2:在mysql目录下&#xff0c;新建data目录。3:在mysql目录下 新建新建一个默认配置文件my.i…
阅读更多...
Taro+react开发（100):问答模块07适配

Taro+react开发（100):问答模块07适配

每一个样式H5名字不能重复
阅读更多...
Impress.js上手 - 抛开PPT、制作Web 3D幻灯片放映

Impress.js上手 - 抛开PPT、制作Web 3D幻灯片放映

前言&#xff1a; 如果你已经厌倦了使用PPT设置路径、设置时间、设置动画方式来制作动画特效、那么Impress.js将是你一个非常好的选择。 用它制作的PPT将更加直观、效果也是嗷嗷美观的。 当然&#xff0c;如果用它来装X&#xff0c;是需要付出一些代价的&#xff0c;不过如果你…
阅读更多...
mysql gtid 主主_mysql GTID主从复制（主库在线，添加新丛库）

mysql gtid 主主_mysql GTID主从复制（主库在线，添加新丛库）

要求&#xff1a;1、 主库上线&#xff0c;主库不停止服务的前提下做主从复制2、 新添加一个丛库操作&#xff1a;1、 在主库导出数据(主库正常运行)&#xff1b;2、 将主库的sql文件传到丛库&#xff1b;3、 丛库恢复数据库&#xff…
阅读更多...
React开发（165）:ant design validateFields

React开发（165）:ant design validateFields

阅读更多...
JS 画饼图，折线图

JS 画饼图，折线图

网址&#xff1a; http://www.hcharts.cn/demo/index.php 效果图&#xff1a; 它的网址里面都很全的。简单实用扣代码即可 使用时注意数据格式即可 1 　　　　　　　　//获取mood_evalue的百分比2 $total_mood_evalue 0;3 //初始化key的数组&…
阅读更多...
React开发（166）:ant design form 设置值

React开发（166）:ant design form 设置值

阅读更多...
vim、gvim在windows下中文乱码的终极解决方案

vim、gvim在windows下中文乱码的终极解决方案

From: http://www.liuhuadong.com/archives/68/index.html vim、gvim在windows下中文乱码的终极解决方案 在windows下vim的中文字体显示并不好&#xff0c;所以我们需要调整字体显示编码为utf-8&#xff0c;只有这样才能使用美观的中文。这时候可能出现很多中文乱码。 如&#…
阅读更多...
前端学习（3344）：设计模式之工厂模式1

前端学习（3344）：设计模式之工厂模式1

阅读更多...
mysql业务繁忙时能建索引吗_MySQL DBA面试高频三十问

mysql业务繁忙时能建索引吗_MySQL DBA面试高频三十问

原标题&#xff1a;MySQL DBA面试高频三十问前言本文主要受众为开发人员,所以不涉及到MySQL的服务部署等操作,且内容较多,大家准备好耐心和瓜子矿泉水.前一阵系统的学习了一下MySQL,也有一些实际操作经验,偶然看到一篇和MySQL相关的面试文章,发现其中的一些问题自己也回答不好,…
阅读更多...
Android小項目之---吃飯選哪？--》選擇對話框(附源碼)

Android小項目之---吃飯選哪？--》選擇對話框(附源碼)

還記得早先我們做的記算器的例子嗎&#xff1f;當中的驗證判斷用到了對話框&#xff0c;今天我們來做一個不一樣的對話框&#xff0c;要做的這個小例子是一個可供選擇效果的對話框 即層層迭迭的Alert Dialog&#xff1b;界面方面我們擺放一個Button來做一個按鈕事件&#xff0c…
阅读更多...
UVa 11059 Maximum Product

UVa 11059 Maximum Product

题意&#xff1a;给出n个数组成的序列&#xff0c;求乘积最大的连续子序列 看的紫书&#xff0c;因为n最大为18&#xff0c;每个数最大为10,所以10^18用long long 能够存下&#xff0c; 直接枚举起点和终点找最大值就可以了 1 #include<iostream> 2 #include<cstdio&…
阅读更多...
前端学习（3345）：数组方法的使用

前端学习（3345）：数组方法的使用

阅读更多...
python 高维数据_用Sci-kit learn和XGBoost进行多类分类：Brainwave数据案例研究

python 高维数据_用Sci-kit learn和XGBoost进行多类分类：Brainwave数据案例研究

在机器学习中&#xff0c;高维数据的分类问题非常具有挑战性。有时候&#xff0c;非常简单的问题会因为这个“维度诅咒”问题变得非常复杂。在本文中&#xff0c;我们将了解不同分类器的准确性和性能是如何变化的。理解数据对于本文&#xff0c;我们将使用Kaggle的“EEG Brainw…
阅读更多...
缔造完美运维 共谱双赢新篇

缔造完美运维 共谱双赢新篇

国华电力早在许久之前就曾经使用北塔网络监控产品&#xff0c;但由于当前国华电力信息中心的网络管理系统呈分散状态&#xff0c;其范围也非常有限&#xff0c;致使无法全面了解国华电力客户信息网中计算机及网络系统的实时运行状况&#xff0c;对网络资源配置及网络流量分布也…
阅读更多...
前端学习（3345）：设计模式之工厂模式2

前端学习（3345）：设计模式之工厂模式2

阅读更多...
Android 底部导航 UI框架

Android 底部导航 UI框架

此版本在“一个不错的UI框架”基础上修改了首次启动底部导航没有选中Tab的情况 运行效果图如下&#xff1a; 1、TabView.java 这里修改的是mState-1 /********************************************************************************* Copyright (c) Weaver Info Tech Co. …
阅读更多...
linux编译源码问题 环境变量的设置

linux编译源码问题 环境变量的设置

本来想安装一个gkrellm-2.3.2&#xff0c;解压进去后,执行./configure&#xff0c;出现这个情况。如图1大概的意思是gtk-2.0未安装吧。然后我下载了一个gtk-2.0&#xff0c;执行./configure&#xff0c;出现这种情况。如图2大概的意思是说&#xff0c;这glib-2.0,atk,pango,cai…
阅读更多...
React开发（164）:React中this.props.children续集

React开发（164）:React中this.props.children续集

阅读更多...
React开发（167）:...数组拼接

React开发（167）:...数组拼接

阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023