看完这篇不要告诉我不会封装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;