前端学习案例-手把手教你封装一个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>
             <Modal
               maskClosable={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, // 标志 是否必填备注
             },
           ],
         };实现总效果
     则功能实现 有什么疑问欢迎一起探讨