更改表单项目，动态显示表单

src/components/ChooseTime.js

@@ -1,6 +1,6 @@
 import React from "react";
 import axios from "axios";
-import {Button,Form,Spin,message,Checkbox,Alert,BackTop,Layout,Card,List,notification} from "antd";
+import {Button,Form,Spin,message,Checkbox,Alert,BackTop,Layout,Card,List} from "antd";
 import "antd/dist/antd.css";
 import { confirmAlert } from "react-confirm-alert";
 import "react-confirm-alert/src/react-confirm-alert.css";
@@ -147,18 +147,6 @@ class TimePicker extends React.Component {
       },
     };
 
-    const tailFormItemLayout = {
-      wrapperCol: {
-        xs: {
-          span: 24,
-          offset: 0,
-        },
-        sm: {
-          span: 16,
-          offset: 8,
-        },
-      },
-    };
 
     const { getFieldDecorator } = this.props.form;
     if (this.state.confirmed) {

src/components/Sheet.js

@@ -8,12 +8,17 @@ import qs from "qs";
 import successInform from "./Message";
 
 class NewForm extends React.Component {
+  constructor() {
+    super();
+    this.state = { WishValid:false,firstWish:undefined,secondWish:undefined };
+  }
   componentDidMount() {
     this.loadLocalStorage();
+    this.props.form.validateFields(['firstWish'], { force: true });
   }
   loadLocalStorage = () => {
     const values = JSON.parse(localStorage.getItem("formCache") || "{}");
-    this.props.setID(values.id_student)
+    this.props.setID(values.id_student);
     this.props.form.setFieldsValue(values);
   };
   saveLocalStorage = () => {
@@ -36,7 +41,7 @@ class NewForm extends React.Component {
           label: "Yes",
           onClick: () => {
             validateFieldsAndScroll((err, values) => {
-              if (err) {
+              if(err) {
                 message.error("填写不正确，请按照提示修改");
               } else {
                 // console.log(values);
@@ -90,34 +95,32 @@ class NewForm extends React.Component {
   };
 
    validator =  (rule, value, callback) => {
-      try{
+    this.setState({WishValid:true})
-        const form = this.props.form
+    const form = this.props.form
-        var firstWish = value
+    var firstWish = value
-        var secondWish = form.getFieldValue('secondWish')
+    var secondWish = form.getFieldValue('secondWish')
-        var thirdWish = form.getFieldValue('thirdWish')
+    var thirdWish = form.getFieldValue('thirdWish')
-        if(firstWish === undefined ||secondWish === undefined ||thirdWish === undefined){
+    this.setState({firstWish:firstWish,secondWish:secondWish})
-          throw("请完整填写三个志愿")
+    try{
-        }
+      if(firstWish === undefined ||secondWish === undefined ||thirdWish === undefined){
-        if(firstWish === secondWish||firstWish === thirdWish ||secondWish === thirdWish){
+        throw("请完整填写三个志愿")
-          throw("三个志愿不能重复")
-        }
-      }catch(err){
-       callback(err)
       }
-      callback()
+      if(firstWish === secondWish||firstWish === thirdWish ||secondWish === thirdWish){
+        throw("三个志愿不能重复")
+      }
+    }catch(err){
+      this.setState({WishValid:false})
+      callback(err)
     }
-    
+    callback()
+  }
   render() {
-    const formItemLayout = {
+    const questions = [[],
-      labelCol: {
+    ["1","2"],
-        xs: { span: 24 },
+    ["3","4"],
-        sm: { span: 8 },
+    ["5","6"],
-      },
+    ["7","8"],
-      wrapperCol: {
+    ["9","10"]] 
-        xs: { span: 24 },
-        sm: { span: 12 },
-      },
-    };
 
     const tailFormItemLayout = {
       wrapperCol: {
@@ -135,7 +138,7 @@ class NewForm extends React.Component {
     const { getFieldDecorator } = this.props.form;
 
     return (
-      <Form {...formItemLayout} onSubmit={this.handleSubmit}>
+      <Form layout="vertical" onSubmit={this.handleSubmit}>
         <Form.Item label="姓名">
           {getFieldDecorator("name", {
             rules: [
@@ -147,7 +150,7 @@ class NewForm extends React.Component {
           })(<Input />)}
         </Form.Item>
 
-        <Form.Item label="学号" onChange={this.onStuIdChange}>
+        <Form.Item label="学号(请先填写此项再上传照片)" onChange={this.onStuIdChange}>
           {getFieldDecorator("id_student", {
             rules: [
               {
@@ -236,6 +239,17 @@ class NewForm extends React.Component {
           })(<Input />)}
         </Form.Item>
 
+        <Form.Item label="自我介绍(可以说说你的兴趣,特长等)">
+          {getFieldDecorator("question1", {
+            rules: [
+              {
+                required: true,
+                message: "做一个简单的自我介绍呗",
+              },
+            ],
+          })(<Input.TextArea autosize={{ minRows: 2, maxRows: 8 }} />)}
+        </Form.Item>
+
         <Form.Item label="第一志愿（三个志愿请不要重复选择）">
           {getFieldDecorator("firstWish", {
             rules: [
@@ -308,7 +322,9 @@ class NewForm extends React.Component {
           )}
         </Form.Item>
 
-        <Form.Item label="是否服从调剂">
+        <Form.Item label="是否服从调剂" onChange = {() => {
+          if(this.props.form.getFieldValue("adjustment") === true) 
+            message.warning("往届两技术部报名人数较多，选择调剂表示存在您被分配到第二、三志愿的可能，请审慎选择。")}}>
           {getFieldDecorator("adjustment", {
             rules: [
               {
@@ -317,55 +333,50 @@ class NewForm extends React.Component {
               },
             ],
           })(
-            <Radio.Group>
+            <Radio.Group >
               <Radio value={true}>是</Radio>
               <Radio value={false}>否</Radio>
             </Radio.Group>
           )}
         </Form.Item>
 
-        <Form.Item label="简述你选择第一志愿的原因">
+        <Form.Item label={this.state.firstWish?questions[this.state.firstWish][0]:""}
+          style={this.state.WishValid?{}:{display:"none"}}>
           {getFieldDecorator("firstReason", {
             rules: [
               {
                 required: true,
-                message: "请填入你选择志愿的原因",
+                message: "请回答问题",
               },
             ],
           })(<Input.TextArea autosize={{ minRows: 2, maxRows: 8 }} />)}
         </Form.Item>
 
-        <Form.Item label="简述你选择第二志愿的原因">
+        <Form.Item label={this.state.firstWish?questions[this.state.firstWish][1]:""} 
+          style={this.state.WishValid?{}:{display:"none"}}>
           {getFieldDecorator("secondReason", {
             rules: [
               {
                 required: true,
-                message: "请填入你选择志愿的原因",
+                message: "请回答问题",
               },
             ],
           })(<Input.TextArea autosize={{ minRows: 2, maxRows: 8 }} />)}
         </Form.Item>
 
-        <Form.Item label="简述你选择第三志愿的原因">
+
+        <Form.Item label={this.state.secondWish?questions[this.state.secondWish][0]:""} 
+          style={this.state.WishValid?{}:{display:"none"}}>
           {getFieldDecorator("thirdReason", {
             rules: [
               {
                 required: true,
-                message: "请填入你选择志愿的原因",
+                message: "请回答问题",
-              },
-            ],
-          })(<Input.TextArea autosize={{ minRows: 2, maxRows: 8 }} />)}
-        </Form.Item>
-        <Form.Item label="简单介绍一下你的特长">
-          {getFieldDecorator("question1", {
-            rules: [
-              {
-                required: true,
-                message: "请简单介绍一下你的特长",
               },
             ],
           })(<Input.TextArea autosize={{ minRows: 2, maxRows: 8 }} />)}
         </Form.Item>
+        
 
         <Form.Item label="你希望未来能在E志者协会得到什么？又能为E志付出什么？">
           {getFieldDecorator("question2", {

src/components/UploadToOSS.js

@@ -91,7 +91,7 @@ class UploadToOSS extends React.Component {
   render() {
     const uploadButton = (
       <Button style={{ marginBlockEnd: 24 }}>
-        <Icon type="upload" /> 点击或拖拽文件到此处以上传照片
+        <Icon type="upload" /> 点击上传生活照(选填)
       </Button>
     );
     const { imageUrl } = this.state;