添加了提交与缓存功能

src/App.css

@@ -1,5 +0,0 @@
-.App {
-  text-align: center;
-  background-image: url(https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg);
-  background-size: 100%;
-}

src/App.js

@@ -1,11 +1,9 @@
-import "./App.css";
 import React, { Component } from "react";
 import axios from "axios";
 import config from "./config.json";
-import Inputsmall from "./Test";
+import { Result } from "antd";
-import {Result } from "antd";
 import EVAfooter from "./EVAfooter";
-import From from "./From";
+import EVAForm from "./EVAForm";
 class App extends Component {
   constructor(props) {
     super(props);
@@ -14,20 +12,18 @@ class App extends Component {
       devurl: config.devurl,
       formname: "EVA",
       error: false,
-      info:{}
+      info: "",
     };
   }
-  componentDidMount() {
+  getforminfo() {
-    this.setState({ router: window.location.pathname });
     axios
       .get(`${this.state.devurl}/api/forminfo/${this.state.router}/`)
       .then((res) => {
         if (res.data.code === 200) {
           this.setState({ formname: res.data.data.formname });
-          this.setState({info:res.data.data.info})
+          this.setState({ info: res.data.data.info });
-          console.log(this.state.info);
+          // console.log(this.state.info);
           document.title = this.state.formname;
-          this.render();
         } else {
           throw "network error when getting forminfo";
         }
@@ -37,6 +33,10 @@ class App extends Component {
         this.setState({ error: true });
       });
   }
+  componentDidMount() {
+    this.setState({ router: window.location.pathname });
+    this.getforminfo();
+  }
   render() {
     return (
       <>
@@ -49,14 +49,15 @@ class App extends Component {
           />
         ) : (
           <>
-            <div className="App">
+            <center>
-              <h1>My React App!</h1>
+              <div className="App">
-              <p>Welcome :)</p>
+                <h1>My React App!</h1>
-              <p>{this.state.router}</p>
+                <p>Welcome :)</p>
-              <Inputsmall />
+                <p>{this.state.router}</p>
-              <From info = {this.state.info}/>
+              </div>
-            </div>
+            </center>
-            <EVAfooter/>
+            <EVAForm key={this.state.info} info={this.state.info} />
+            <EVAfooter />
           </>
         )}
       </>

src/EVAForm.js

@@ -0,0 +1,150 @@
+import React, { useState } from "react";
+import { Form, Input, Radio, Button } from "antd";
+import axios from "axios";
+import config from "./config.json";
+const { TextArea } = Input;
+function EVAForm(props) {
+  const [info] = useState(props.info);
+  const [form] = Form.useForm();
+  let router = window.location.pathname;
+  const onFinish = (values) => {
+    console.log("Success:", values);
+    axios.post(`${config.devurl}/api/formsubmit/${router}`, values).then((res) => {
+      if (res.data.code === 200) {
+        console.log("success");
+      } else {
+        throw "network error when submitting form";
+      }
+    })
+    .catch((err) => {
+      console.log(err);
+    })
+  };
+  const onFinishFailed = (errorInfo) => {
+    console.log("Failed:", errorInfo);
+  };
+  const onSaveStorage = () => {
+    console.log(form.getFieldValue());
+    //save value to localstorage
+    localStorage.setItem("form", JSON.stringify(form.getFieldValue()));
+  };
+  const onLoadStorage = () => {
+    //load value from localstorage
+    form.setFieldsValue(JSON.parse(localStorage.getItem("form")));
+  }
+
+
+  return (
+    <Form
+      name="basic"
+      labelCol={{
+        span: 8,
+      }}
+      wrapperCol={{
+        span: 16,
+      }}
+      initialValues={{
+        remember: true,
+      }}
+      form={form}
+      onFinish={onFinish}
+      onFinishFailed={onFinishFailed}
+      autoComplete="off"
+    >
+      {/* {generateForm()} */}
+      {info.question !== undefined
+        ? info.question.map((item, index) => {
+            return (
+              <div>
+                <Form.Item
+                  key={item.title}
+                  label={item.title}
+                >
+                  {item.type === "radio" && (
+                    <Form.Item
+                      name={item.title}
+                      key={item.title}
+                      rules={[
+                        {
+                          required: true,
+                          message: item.message,
+                        },
+                      ]}
+                      noStyle
+                    >
+                      <Radio.Group>
+                        {item.options.map((item, index) => {
+                          return (
+                            <Radio.Button key={index} value={index}>
+                              {item}
+                            </Radio.Button>
+                          );
+                        })}
+                      </Radio.Group>
+                    </Form.Item>
+                  )}
+                  {item.type === "input" && (
+                    <Form.Item
+                      name={item.title}
+                      key={item.title}
+                      rules={[
+                        {
+                          required: true,
+                          message: item.message,
+                        },
+                      ]}
+                      noStyle
+                    >
+                      <Input
+                        key={item.title}
+                        placeholder={item.placeholder}
+                        style={item.style}
+                      />
+                    </Form.Item>
+                  )}
+                  {item.type === "textarea" && (
+                    <Form.Item
+                      name={item.title}
+                      key={item.title}
+                      rules={[
+                        {
+                          required: true,
+                          message: item.message,
+                        },
+                      ]}
+                      noStyle
+                    >
+                      <TextArea
+                        placeholder={item.placeholder}
+                        style={item.style}
+                        rows={item.rows}
+                      />
+                    </Form.Item>
+                  )}
+                </Form.Item>
+              </div>
+            );
+          })
+        : null}
+      <Form.Item
+      key="submit"
+        wrapperCol={{
+          offset: 8,
+          span: 16,
+        }}
+      >
+        <Button type="primary" htmlType="submit" style={{"margin":"0 8px 0 0"}}>
+          Submit
+        </Button>
+        <Button htmlType="button" onClick={onSaveStorage} style={{"margin":"0 8px 0 0"}}>
+          save
+        </Button>
+        <Button htmlType="button" onClick={onLoadStorage} style={{"margin":"0 8px 0 0"}}>
+          load
+        </Button>
+      </Form.Item>
+    </Form>
+  );
+}
+
+export default EVAForm;

src/From.js

@@ -1,19 +0,0 @@
-import React from "react";
-class From extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      info: {}
-    }
-  }
-  componentDidMount() {
-    console.log(this.props.info);
-    this.setState({ info: this.props.info })
-  }
-  render() {
-    return (
-      <></>
-    );
-  }
-}
-export default From;

src/Inputsmall.js

@@ -0,0 +1,25 @@
+import { Input } from "antd";
+import React, { Component } from "react";
+class Inputsmall extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      describe: "#",
+      placeholder: "请输入你的名字",
+    };
+  }
+  render() {
+    return (
+      <div>
+        <span style={{ marginRight: "1%" }}>{this.state.describe}</span>
+        <span>
+          <Input
+            style={{ width: "20%" }}
+            placeholder={this.state.placeholder}
+          />
+        </span>
+      </div>
+    );
+  }
+}
+export default Inputsmall;

src/Test.js

@@ -1,22 +1,29 @@
-import { Input} from "antd";
+import { Radio } from "antd";
 import React, { Component } from "react";
-class Inputsmall extends Component {
+class Radiomiddle extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      describe: "#",
+      describe: "你的名字是?",
-      placeholder: "请输入你的名字",
+      choice: ["option1", "option2", "option3"],
+      value: 0,
     };
   }
   render() {
     return (
       <div>
-        <span style={{ marginRight: "1%" }}>你的名字是?</span>
+        <span style={{ marginRight: "1%" }}>{this.state.describe}</span>
         <span>
-          <Input style={{ width: "20%" }} />
+          <Radio.Group >
+            {
+                this.state.choice.map((item, index) => {
+                    return <Radio value={index}>{item}</Radio>
+                })
+            }
+          </Radio.Group>
         </span>
       </div>
     );
   }
 }
-export default Inputsmall;
+export default Radiomiddle;

src/index.css

@@ -11,3 +11,8 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+#root{
+  background-image: url(https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg);
+  background-size: 100%;
+}