手把手教你封装一个ant design的审核框组件

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

这边先上代码

然后我们逐个解释

import React, { Component, Fragment } from 'react';
import { Modal, Row, Form, Col, Radio, Tag, Input, message } from 'antd';/*** 弹框 审核* @param {String}  requestUrl       请求 url {必填}* @param {Object}  requestParams    请求参数** @param {Array}   checkHandleList  单选数据（审核通过，驳回）* @param {Array}   checkTagList     备注快捷便签 list* @param {Boolean}  modalShow       弹窗显示**/
@Form.create()
class BaseCheck extends Component {constructor(props) {super(props);//控制弹出框的开启this.state = {loading: false,};}//控制父组件可以调用子组件的方法componentDidMount() {this.props.onRef && this.props.onRef(this);}// 点击确定 校验并请求handleOkCheck = () => {this.props.form.validateFieldsAndScroll(['checkRadio', 'checkRemark'], 
(error, values) => {if (error) {return;}const { checkHandleList } = this.props;const arr = checkHandleList.filter((item) => item.key === 
values.checkRadio);if (arr[0].isRequired && !values.checkRemark) {Modal.error({title: '提示',content: '请输入驳回备注',});return;}this.checkRequest(values);});};//处理接口请求checkRequest = async (values) => {this.setState({ loading: true });let { requestUrl, requestParams = {} } = this.props;try {const res = await requestUrl({...requestParams,approveAction: values.checkRadio,approveMemo: values.checkRemark,});if (res.returnCode == 0) {message.success('提交成功');//提交成功的回调this.props.onOk && this.props.onOk();} else {message.warning(res.returnMsg);}} catch (error) {} finally {this.setState({ loading: false });}};//取消的时候的回调handleCancelCheck = () => {this.props.onCancel && this.props.onCancel();};// 点击快捷备注标签tagClick = (item) => {this.props.form.setFieldsValue({checkRemark: item.value,});};// 初始化备注initRemarkFn = () => {this.props.form.setFieldsValue({checkRemark: '',});};render() {const {form: { getFieldDecorator },checkTagList = [],modalShow,checkHandleList = [],radioMsg,} = this.props;const style = {position: 'relative',top: '-20px',left: '120px',color: '#1890ff',};return (<Fragment><ModalmaskClosable={false}title="审核"visible={modalShow}width={550}onOk={this.handleOkCheck}onCancel={this.handleCancelCheck}><Form labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} 
layout={'inline'}><Row span={24}><Col span={24}><Form.Item label={'审核'} style={{ width: '100%' }}>{getFieldDecorator('checkRadio', {rules: [{ required: true, message: '请选择是否审核通过' }],})(<Radio.Group>{checkHandleList.map((item) => {return (<Radio value={item.key} key={item.key}>{item.value}</Radio>);})}{/*<Radio value={PRODUCTION_LIBRARY_CHECKED}
>审核通过</Radio>*/}{/*<Radio value={PRODUCTION_LIBRARY_CHECKNOT
}>驳回</Radio>*/}</Radio.Group>)}</Form.Item></Col>{radioMsg && <Col style={style}>{radioMsg}</Col>}</Row><Row span={24}><Col span={24}><Form.Item label={'备注'} style={{ width: '100%' }}>{getFieldDecorator('checkRemark')(<Input.TextArea />)}</Form.Item></Col></Row><Row><Col style={{ paddingLeft: '120px' }}>{checkTagList.map((item, index) => {return (<Tag color="#108ee9" key={index} onClick={() =>this.tagClick(item)}>{item.value}</Tag>);})}</Col></Row></Form></Modal></Fragment>);}
}export default BaseCheck;

解释1 这边loding控制接口请求的加载

解释2 设置单选数据驳回的时候添加备注

解释3 点击驳回时候的快捷备注

解释4 如何使用

父组件

   <BaseCheck

          {...checkParams}

          onOk={this.handleOkCheck}

          onCancel={() => {

            this.setState({ checkShow: false });

          }}

          modalShow={checkShow}

        />

const checkParams = {requestUrl: withdrawalRecordReview,requestParams: {codeList: selectedRowKeys,},checkTagList,checkHandleList: [{key: BOOTH_TYPE_ACCEPT_ACCEPT,value: '审核通过',isRequired: false, // 标志 是否必填备注},{key: BOOTH_TYPE_REFUSE_REFUSE,value: '驳回',isRequired: true, // 标志 是否必填备注},],};

实现总效果