我是歌謠 放棄很容易 但是堅持一定很酷 微信公眾號關注前端小歌謠

獲取前端學習知識

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弹框组件了的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。