看完这篇不要告诉我不会封装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引入控制是否必填接口调用参数直接拼接使用秒呀

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

神了！！看完这篇文章我不仅学会了手撸vue三开关组件，还搞懂了父子组件传值
神了!!看完这篇文章我不仅学会了手撸vue三开关组件,还搞懂了父子组件传值引子前置知识什么是vue组件父子组件传值父传子子传父 model选项的引入三开关组件(three-switch) ...
我就不信看完这篇你还搞不懂信息熵
我就不信看完这篇你还搞不懂信息熵 https://mp.weixin.qq.com/s/7NrB0UtmELXD3UNO3C6jGA 让我们说人话!好的数学概念都应该是通俗易懂的. 信息熵,信息熵,怎 ...
docker 删除所有镜像_关于 Docker 镜像的操作，看完这篇就够啦 !（下）| 文末福利...
紧接着上篇<关于 Docker 镜像的操作,看完这篇就够啦 !(上)>,奉上下篇 !!! 镜像作为 Docker 三大核心概念中最重要的一个关键词,它有很多操作,是您想学习容器技术不得不掌 ...
java与python难度对比_Python和Java的区别，看完这篇文章你就清楚啦
众所周知,在数不清的编程语言中Java自诞生之日起长盛不衰,可谓是神话般的存在.随着人工智能时代的到来,Python迅速席卷全球,作为当下最热门的编程语言,因其简单实用且应用场景广泛备受青睐. 一个是 ...
redis hashmap过期_看完这篇再也不怕 Redis 面试了
0.前言 Redis是跨语言的共同技术点,无论是Java还是C++都会问到,所以是个高频面试点. 笔者是2017年才开始接触Redis的,期间自己搭过单机版和集群版,不过现在大一些的公司都完全是运 ...
运维学python用不上_作为运维你还在想要不要学Python，看完这篇文章再说！
原标题:作为运维你还在想要不要学Python,看完这篇文章再说! 本文由马哥教育Python自动化实战班5期学员推荐,转载自简书,作者为Li.Yingjie,内容略经小编改编和加工,观点跟作者无关,最 ...
服务器使用显示器的大小,别纠结了！看完这篇你就知道显示器买多大尺寸
[中关村在线显示器频道原创]华丽的巨屏,清晰细腻的视觉质感,再辅以唯美大气的工业设计元素,这是有品位有追求的用户所热切追求的.毫无疑问,包括手机.显示器.电视等的显示行业已经进入了"大屏时代 ...
学习Nginx，看完这篇超详细的文章就够了
目录本文简介一.Nginx的基本概念 1.1.Nginx是什么? 1.2.Nginx能帮助我们做些什么? 1.3.Nginx的特性二.Nginx的安装 2.1.环境介绍 2.2.安装Nginx ...
为何看完这篇RxHttp Http请求框架会觉得如此销魂，全文干货建议收藏！
前言 RxHttp相较于retrofit,功能上,两者均能实现,并无多大差异,更多的差异体现功能的使用上,也就是易用性,如对文件上传/下载/进度监听的操作上,RxHttp用及简的API,可以说碾压re ...

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

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

最新文章

热门文章