前端學習案例-手把手教你封裝一個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, // 标志 是否必填備注
             },
           ],
         };實作總效果
     則功能實作 有什麼疑問歡迎一起探讨