update antd 4.0

Author: javaLuo

package.json

@@ -23,34 +23,34 @@
     "pnp": false
   },
   "dependencies": {
-    "@rematch/core": "^1.3.0",
-    "antd": "3.26.7",
+    "@rematch/core": "^1.4.0",
+    "antd": "4.0.0",
     "axios": "^0.19.2",
     "core-js": "^3.6.4",
     "history": "^4.10.1",
     "lodash": "^4.17.15",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
+    "react": "^16.13.0",
+    "react-dom": "^16.13.0",
     "react-loadable": "^5.5.0",
-    "react-redux": "^7.1.3",
+    "react-redux": "^7.2.0",
     "react-router-dom": "^5.1.2",
     "redux": "^4.0.5"
   },
   "devDependencies": {
-    "@babel/core": "^7.8.3",
+    "@babel/core": "^7.8.6",
     "@babel/plugin-proposal-class-properties": "^7.8.3",
     "@babel/plugin-proposal-decorators": "^7.8.3",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3",
     "@babel/plugin-proposal-object-rest-spread": "^7.8.3",
     "@babel/plugin-proposal-optional-chaining": "^7.8.3",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-transform-runtime": "^7.8.3",
-    "@babel/preset-env": "^7.8.3",
+    "@babel/preset-env": "^7.8.6",
     "@babel/preset-react": "^7.8.3",
-    "@babel/runtime": "^7.8.3",
+    "@babel/runtime": "^7.8.4",
     "antd-dayjs-webpack-plugin": "^0.0.8",
     "autoprefixer": "^9.7.4",
-    "babel-eslint": "^10.0.3",
+    "babel-eslint": "^10.1.0",
     "babel-loader": "^8.0.6",
     "babel-plugin-import": "^1.13.0",
     "body-parser": "^1.19.0",
@@ -59,14 +59,14 @@
     "eslint": "^6.8.0",
     "eslint-loader": "^3.0.3",
     "eslint-plugin-prettier": "^3.1.2",
-    "eslint-plugin-react": "^7.18.0",
-    "eslint-plugin-react-hooks": "^2.3.0",
+    "eslint-plugin-react": "^7.18.3",
+    "eslint-plugin-react-hooks": "^2.5.0",
     "express": "^4.17.1",
-    "favicons-webpack-plugin": "3.0.0",
-    "file-loader": "^5.0.2",
+    "favicons-webpack-plugin": "3.0.1",
+    "file-loader": "^5.1.0",
     "happypack": "^5.0.1",
     "html-webpack-plugin": "^4.0.0-beta.11",
-    "less": "^3.10.3",
+    "less": "^3.11.1",
     "less-loader": "^5.0.0",
     "mini-css-extract-plugin": "^0.9.0",
     "mockjs": "^1.1.0",
@@ -75,10 +75,10 @@
     "prettier": "1.19.1",
     "style-loader": "1.1.3",
     "sw-precache-webpack-plugin": "^1.0.0",
-    "terser-webpack-plugin": "^2.3.3",
+    "terser-webpack-plugin": "^2.3.5",
     "url-loader": "^3.0.0",
-    "webpack": "^4.41.5",
-    "webpack-cli": "^3.3.10",
+    "webpack": "^4.42.0",
+    "webpack-cli": "^3.3.11",
     "webpack-dev-middleware": "^3.7.2",
     "webpack-hot-middleware": "^2.25.0",
     "webpackbar": "^4.0.0",

src/container/test/index.js

@@ -21,8 +21,7 @@ function TestPageContainer({
   location, // 自动注入的location对象
   match, // 自动注入的match对象
   history, // 自动注入的history对象
-  actions, // 上面model中定义的actions对象，自动成为this.props.actions变量
-  form // antd的form表单高阶组件自动注入的form对象
+  actions // 上面model中定义的actions对象，自动成为this.props.actions变量
 }) {
   const [visible, setVisible] = useState(false); // 模态框隐藏和显示
   const [mokeFetch, setMokeFetch] = useState([]); // 用于测试fetch请求
@@ -70,18 +69,11 @@ function TestPageContainer({
     });
   }
 
-  // 表单提交登录
+  // 表单提交且验证通过时触发
   function handleSubmit(e) {
-    e.preventDefault();
-    form.validateFields((err, values) => {
-      if (!err) {
-        message.success("执行了登录操作");
-      }
-    });
+    message.success("执行了登录操作");
   }
 
-  const { getFieldDecorator } = form;
-
   return (
     <div className="page-test">
       <h1 className="title">功能测试</h1>
@@ -136,24 +128,24 @@ function TestPageContainer({
         <div className="list">
           <h2>Antd表单</h2>
           <div style={{ maxWidth: "400px" }}>
-            <Form onSubmit={handleSubmit}>
-              <Form.Item>
-                {getFieldDecorator("username", {
-                  rules: [{ required: true, message: "请输入用户名" }]
-                })(
-                  <Input prefix={<Icon type="user" />} placeholder="用户名" />
-                )}
+            <Form onFinish={handleSubmit}>
+              <Form.Item
+                label="用户名"
+                name="username"
+                rules={[{ required: true, message: "请输入用户名" }]}
+              >
+                <Input prefix={<Icon type="user" />} placeholder="用户名" />
               </Form.Item>
-              <Form.Item>
-                {getFieldDecorator("password", {
-                  rules: [{ required: true, message: "请输入密码" }]
-                })(
-                  <Input
-                    type="password"
-                    prefix={<Icon type="lock" />}
-                    placeholder="密码"
-                  />
-                )}
+              <Form.Item
+                label="密码"
+                name="password"
+                rules={[{ required: true, message: "请输入密码" }]}
+              >
+                <Input
+                  type="password"
+                  prefix={<Icon type="lock" />}
+                  placeholder="密码"
+                />
               </Form.Item>
               <Form.Item>
                 <Button type="primary" htmlType="submit">
@@ -234,8 +226,6 @@ function TestPageContainer({
   );
 }
 
-const FormComponent = Form.create()(TestPageContainer);
-
 export default connect(
   state => ({
     userinfo: state.app.userinfo, // 引入app model中的userinfo数据
@@ -248,4 +238,4 @@ export default connect(
       serverFetch: dispatch.test.serverFetch // 引入test model中的fetch异步请求action
     }
   })
-)(FormComponent);
+)(TestPageContainer);

src/container/testclass/index.js

@@ -23,8 +23,7 @@ class TestClassPageContainer extends React.Component {
     location: P.any, // 自动注入的location对象
     match: P.any, // 自动注入的match对象
     history: P.any, // 自动注入的history对象
-    actions: P.object, // 上面model中定义的actions对象，自动成为this.props.actions变量
-    form: P.any // antd的form表单高阶组件自动注入的form对象
+    actions: P.object // 上面model中定义的actions对象，自动成为this.props.actions变量
   };
 
   /** react生命周期 - 构造函数 **/
@@ -156,8 +155,6 @@ class TestClassPageContainer extends React.Component {
   }
 
   render() {
-    const { form } = this.props;
-
     return (
       <div className="page-test-class">
         <h1 className="title">功能测试</h1>
@@ -300,7 +297,6 @@ class TestClassPageContainer extends React.Component {
   }
 }
 
-const FormComponent = Form.create()(TestClassPageContainer);
 export default connect(
   state => ({
     userinfo: state.app.userinfo, // 引入app model中的userinfo数据
@@ -313,4 +309,4 @@ export default connect(
       serverFetch: model.test.serverFetch // 引入test model中的fetch异步请求action
     }
   })
-)(FormComponent);
+)(TestClassPageContainer);