我是歌謠 放棄很容易 但是堅(jiān)持一定很酷 微信公眾號(hào)關(guān)注前端小歌謠

獲取前端學(xué)習(xí)知識(shí)

1設(shè)計(jì)需求 封裝一個(gè)彈框組件 直接調(diào)用接口

2技術(shù)棧 ant design+react

設(shè)計(jì)第一步

繪制樣式

<ModalmaskClosable={false}visible={visible}title={'簽收協(xié)議'}onOk={this.handleSignFor}onCancel={() => this.onOpenOrClose(false)}width={800}destroyOnClose><Form{...formItemLayout}// className={styles}style={{ paddingTop: '0px' }}wrapperCol={{ span: 16 }}><Form.Item label="簽收結(jié)果">{getFieldDecorator('signInResult', {initialValue: ResultQsList.length > 0 ?ResultQsList[1].key : '',rules: [{ required: true, message: '請(qǐng)選擇簽收結(jié)果' }],})(<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="歸檔編號(hào)">{getFieldDecorator('archivedEncode', {initialValue: 1,rules: [{ required: true, message: '請(qǐng)輸入歸檔編號(hào)' }],})(<InputNumberformatter={(value) => `HZ ${value}`}style={{ width: '100%' }}placeholder="請(qǐng)輸入"onChange={this.handleArchivedEncode}/>)}</Form.Item>{/* 控制驗(yàn)證的規(guī)則 */}<Form.Item label="原因">{getFieldDecorator('signInResson',form.getFieldsValue().signStatus === QS_TESHU ||form.getFieldsValue().signStatus === JS_TESHU? {initialValue: '',rules: [{ required: true, message: '請(qǐng)?zhí)顚懺?#39; }],}: { rules: [{ message: '請(qǐng)?zhí)顚懺?#39; }] })(<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: '請(qǐng)?zhí)顚憘渥?#39;}] })(<TextArea allowClear placeholder="請(qǐng)?zhí)顚憘渥?#34; autoSize={{ minRows: 3}} />)}</div></Form.Item></Form></Modal>

?這樣就渲染了如圖所示的樣式

?設(shè)計(jì)點(diǎn)二 當(dāng)正常簽收的時(shí)候原因?yàn)榉潜靥?其他兩種情況為必填

?形成效果正常簽收的時(shí)候原因?yàn)榉潜靥?其他兩種情況為必填

?3設(shè)計(jì)思路 這樣就形成了判斷

這個(gè)時(shí)候 后臺(tái)接口是要傳code

handleSignFor = () => {//獲取到所有的form表單的值const formData = this.props.form.getFieldsValue();console.log(formData, 'formData');//參數(shù)拼接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('協(xié)議簽收成功');this.onOpenOrClose(false);this.props.getContractList(); //重新獲取數(shù)據(jù)}},});};

這段代碼

進(jìn)行接口調(diào)用

?4設(shè)計(jì)思路 父子組件調(diào)用

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

?簽收的時(shí)候直接onref調(diào)用子組件的方法

//簽收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; //修改數(shù)據(jù)請(qǐng)求 接口調(diào)用請(qǐng)求 @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) => {};//點(diǎn)擊確定handleSignFor = () => {//獲取到所有的form表單的值const formData = this.props.form.getFieldsValue();console.log(formData, 'formData');//參數(shù)拼接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('協(xié)議簽收成功');this.onOpenOrClose(false);this.props.getContractList(); //重新獲取數(shù)據(jù)}},});};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={'簽收協(xié)議'}onOk={this.handleSignFor}onCancel={() => this.onOpenOrClose(false)}width={800}destroyOnClose><Form{...formItemLayout}// className={styles}style={{ paddingTop: '0px' }}wrapperCol={{ span: 16 }}><Form.Item label="簽收結(jié)果">{getFieldDecorator('signInResult', {initialValue: ResultQsList.length > 0 ? ResultQsList[1].key : '',rules: [{ required: true, message: '請(qǐng)選擇簽收結(jié)果' }],})(<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="歸檔編號(hào)">{getFieldDecorator('archivedEncode', {initialValue: 1,rules: [{ required: true, message: '請(qǐng)輸入歸檔編號(hào)' }],})(<InputNumberformatter={(value) => `HZ ${value}`}style={{ width: '100%' }}placeholder="請(qǐng)輸入"onChange={this.handleArchivedEncode}/>)}</Form.Item>{/* 控制驗(yàn)證的規(guī)則 */}<Form.Item label="原因">{getFieldDecorator('signInResson',form.getFieldsValue().signInResult === QS_TESHU ||form.getFieldsValue().signInResult === JS_TESHU? {initialValue: '',rules: [{ required: true, message: '請(qǐng)?zhí)顚懺?#39; }],}: { rules: [{ message: '請(qǐng)?zhí)顚懺?#39; }] })(<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: '請(qǐng)?zhí)顚憘渥?#39; }] })(<TextArea allowClear placeholder ="請(qǐng)?zhí)顚憘渥?#34; autoSize={{ minRows: 3 }} />)}</div></Form.Item></Form></Modal>);} }export default SignForModal;

我是歌謠 所以總的實(shí)現(xiàn)了一個(gè)父子傳值 子組件給個(gè)方法回調(diào)給父getContractList

回調(diào)用來重新刷新列表 直接onref調(diào)用組件的方法進(jìn)行處理數(shù)據(jù) 狀態(tài)判斷外部定義一個(gè)data.js引入 控制是否必填 接口調(diào)用參數(shù)直接拼接使用 秒呀

總結(jié)

以上是生活随笔為你收集整理的看完这篇不要告诉我不会封装ant design弹框组件了的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。