reducer修改和form表单

Author: introvert-y

config-overrides.js

@@ -0,0 +1,9 @@
+const { override, fixBabelImports } = require('customize-cra');
+
+module.exports = override(
+  fixBabelImports('import', {
+    libraryName: 'antd',
+    libraryDirectory: 'es',
+    style: 'css',
+  }),
+);

package.json

@@ -7,14 +7,17 @@
     "@svgr/webpack": "4.3.2",
     "@typescript-eslint/eslint-plugin": "1.13.0",
     "@typescript-eslint/parser": "1.13.0",
+    "antd": "^3.24.3",
     "babel-eslint": "10.0.2",
     "babel-jest": "^24.8.0",
     "babel-loader": "8.0.6",
+    "babel-plugin-import": "^1.12.2",
     "babel-plugin-named-asset-import": "^0.3.3",
     "babel-preset-react-app": "^9.0.1",
     "camelcase": "^5.2.0",
     "case-sensitive-paths-webpack-plugin": "2.2.0",
     "css-loader": "2.1.1",
+    "customize-cra": "^0.8.0",
     "dotenv": "6.2.0",
     "dotenv-expand": "4.2.0",
     "echarts": "^4.3.0",
@@ -45,6 +48,7 @@
     "postcss-safe-parser": "4.0.1",
     "react": "^16.9.0",
     "react-app-polyfill": "^1.0.2",
+    "react-app-rewired": "^2.1.4",
     "react-dev-utils": "^9.0.2",
     "react-dom": "^16.9.0",
     "react-redux": "^7.1.1",

src/index.css

@@ -1,3 +1,4 @@
+@import '~antd/dist/antd.css';
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",

src/page/form/index.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  Input, Form, Button,
+} from 'antd';
+
+const { TextArea } = Input;
+// import req from '../../../req';
+
+/**
+ * 用户名弹窗
+ */
+function Page({form}) {
+  const { getFieldDecorator, validateFields, getFieldValue } = form;
+  function hasErrors(fieldsError) {
+    return Object.keys(fieldsError).some(field => fieldsError[field]);
+  }
+  function onSubmit() {
+    validateFields((err, val) => {
+      console.log('value', val);
+      if (err) {
+        console.log(err);
+        return;
+      }
+      console.log(val.text);
+    });
+  }
+  return (
+    <Form
+      labelCol={{
+        span: 6,
+      }}
+      wrapperCol={{
+        span: 18,
+      }}
+    >
+      <Form.Item label="原因：">
+        {getFieldDecorator('text', {
+          rules: [
+            { required: true, message: 'Please input your username!' },
+          ],
+        })(
+          <TextArea placeholder="请输入拒绝原因，必填" />,
+        )}
+      </Form.Item>
+      <Button onClick={() => onSubmit()} disabled={getFieldValue('text') ? false : true }>提交</Button>
+    </Form>
+  )
+}
+
+Page.propTypes = {
+  form: PropTypes.object.isRequired,
+};
+
+export default Form.create({ name: 'edit_cause' })(Page);

src/router/index.js

@@ -14,6 +14,7 @@ import UseMemo from '../page/useMemo/index'
 import UseCallback from '../page/useCallback/index'
 import Memo from '../page/memoParent/index'
 import HeightEchart from '../page/heightEchart/index'
+import FormBox from '../page/form/index'
 
 function Header() {
   return (
@@ -65,6 +66,9 @@ function Header() {
       <li>
         <Link to="/useCallback">hook之useCallback</Link>
       </li>
+      <li>
+        <Link to="/form">form表单</Link>
+      </li>
     </ul>
   );
 }
@@ -91,6 +95,7 @@ function App() {
             <Route path="/useCallback" component={UseCallback} />
             <Route path="/memo" component={Memo} />
             <Route path="/heightEchart" component={HeightEchart} />
+            <Route path="/form" component={FormBox} />
         </Switch>
       </div>
     </BrowserRouter>