refactor render or AdvancedForm

src/pages/Forms/AdvancedForm.js

@@ -74,35 +74,11 @@ class AdvancedForm extends PureComponent {
     window.removeEventListener('resize', this.resizeFooterToolbar);
   }
 
-  resizeFooterToolbar = () => {
-    requestAnimationFrame(() => {
-      const sider = document.querySelectorAll('.ant-layout-sider')[0];
-      if (sider) {
-        const width = `calc(100% - ${sider.style.width})`;
-        const { width: stateWidth } = this.state;
-        if (stateWidth !== width) {
-          this.setState({ width });
-        }
-      }
-    });
-  };
-
-  render() {
-    const { form, dispatch, submitting } = this.props;
-    const { getFieldDecorator, validateFieldsAndScroll, getFieldsError } = form;
-    const validate = () => {
-      validateFieldsAndScroll((error, values) => {
-        if (!error) {
-          // submit the values
-          dispatch({
-            type: 'form/submitAdvancedForm',
-            payload: values,
-          });
-        }
-      });
-    };
+  getErrorInfo = () => {
+    const {
+      form: { getFieldsError },
+    } = this.props;
     const errors = getFieldsError();
-    const getErrorInfo = () => {
     const errorCount = Object.keys(errors).filter(key => errors[key]).length;
     if (!errors || errorCount === 0) {
       return null;
@@ -140,7 +116,43 @@ class AdvancedForm extends PureComponent {
       </span>
     );
   };
+
+  resizeFooterToolbar = () => {
+    requestAnimationFrame(() => {
+      const sider = document.querySelectorAll('.ant-layout-sider')[0];
+      if (sider) {
+        const width = `calc(100% - ${sider.style.width})`;
+        const { width: stateWidth } = this.state;
+        if (stateWidth !== width) {
+          this.setState({ width });
+        }
+      }
+    });
+  };
+
+  validate = () => {
+    const {
+      form: { validateFieldsAndScroll },
+      dispatch,
+    } = this.props;
+    validateFieldsAndScroll((error, values) => {
+      if (!error) {
+        // submit the values
+        dispatch({
+          type: 'form/submitAdvancedForm',
+          payload: values,
+        });
+      }
+    });
+  };
+
+  render() {
+    const {
+      form: { getFieldDecorator },
+      submitting,
+    } = this.props;
     const { width } = this.state;
+
     return (
       <PageHeaderWrapper
         title="高级表单"
@@ -298,8 +310,8 @@ class AdvancedForm extends PureComponent {
           })(<TableForm />)}
         </Card>
         <FooterToolbar style={{ width }}>
-          {getErrorInfo()}
-          <Button type="primary" onClick={validate} loading={submitting}>
+          {this.getErrorInfo()}
+          <Button type="primary" onClick={this.validate} loading={submitting}>
             提交
           </Button>
         </FooterToolbar>