JSON数据变成模板字符串渲染页面（2）

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Form, Input, Icon, Button } from "antd";

let constructData = {
  desc: "SUPER",
  value: {
    studentId: {
      value: "zy1106169",
      desc: "学号"
    },
    awards: {
      value: [
        {
          institute: {
            value: {
              otherLeader: {
                valueItem: {
                  gender: {
                    desc: "性别"
                  },
                  name: {
                    desc: "姓名"
                  },
                  age: {
                    desc: "年龄"
                  }
                },
                desc: "其他领导"
              },
              level: {
                desc: "级别"
              },
              title: {
                valueItem: {},
                desc: "头衔"
              },
              masterLeader: {
                value: {
                  gender: {
                    desc: "性别"
                  },
                  name: {
                    desc: "姓名"
                  },
                  age: {
                    desc: "年龄"
                  }
                },
                desc: "主要领导"
              },
              instituteName: {
                desc: "机构名称"
              }
            },
            desc: "颁奖机构"
          },
          awardDate: {
            value: "20131211",
            desc: "获奖日期(格式 yyyyMMdd)"
          },
          awardName: {
            value: "ACM TOP",
            desc: "奖项名称"
          }
        },
        {
          institute: {
            value: {
              otherLeader: {
                valueItem: {
                  gender: {
                    desc: "性别"
                  },
                  name: {
                    desc: "姓名"
                  },
                  age: {
                    desc: "年龄"
                  }
                },
                desc: "其他领导"
              },
              level: {
                desc: "级别"
              },
              title: {
                valueItem: {},
                desc: "头衔"
              },
              masterLeader: {
                value: {
                  gender: {
                    desc: "性别"
                  },
                  name: {
                    desc: "姓名"
                  },
                  age: {
                    desc: "年龄"
                  }
                },
                desc: "主要领导"
              },
              instituteName: {
                desc: "机构名称"
              }
            },
            desc: "颁奖机构"
          },
          awardDate: {
            value: "20051211",
            desc: "获奖日期(格式 yyyyMMdd)"
          },
          awardName: {
            value: "NOI TOP",
            desc: "奖项名称"
          }
        },
        {
          institute: {
            value: {
              otherLeader: {
                valueItem: {
                  gender: {
                    desc: "性别"
                  },
                  name: {
                    desc: "姓名"
                  },
                  age: {
                    desc: "年龄"
                  }
                },
                desc: "其他领导"
              },
              level: {
                desc: "级别"
              },
              title: {
                valueItem: {},
                desc: "头衔"
              },
              masterLeader: {
                value: {
                  gender: {
                    desc: "性别"
                  },
                  name: {
                    desc: "姓名"
                  },
                  age: {
                    desc: "年龄"
                  }
                },
                desc: "主要领导"
              },
              instituteName: {
                desc: "机构名称"
              }
            },
            desc: "颁奖机构"
          },
          awardDate: {
            value: "20061211",
            desc: "获奖日期(格式 yyyyMMdd)"
          },
          awardName: {
            value: "IOI TOP",
            desc: "奖项名称"
          }
        }
      ],
      desc: "获奖列表"
    },
    basicInfo: {
      value: {
        gender: {
          value: "male",
          desc: "性别"
        },
        name: {
          value: "zjs",
          desc: "姓名"
        },
        age: {
          value: "18",
          desc: "年龄"
        }
      },
      desc: "基本信息"
    }
  }
};

let id = 0;

class DynamicFieldSet extends React.Component {
  remove = k => {
    const { form } = this.props;
    // can use data-binding to get
    const keys = form.getFieldValue("keys");
    // We need at least one passenger
    if (keys.length === 1) {
      return;
    }

    // can use data-binding to set
    form.setFieldsValue({
      keys: keys.filter(key => key !== k)
    });
  };

  add = () => {
    const { form } = this.props;
    // can use data-binding to get
    const keys = form.getFieldValue("keys");
    const nextKeys = keys.concat(id++);
    // can use data-binding to set
    // important! notify form to detect changes
    form.setFieldsValue({
      keys: nextKeys
    });
  };

  addMulti = () => {
    const count = 5;
    const { form } = this.props;
    // can use data-binding to get
    const keys = form.getFieldValue("keys");
    let nextKeys = keys;
    for (let i = 0; i < count; i++) {
      nextKeys = nextKeys.concat(id++);
      console.log(nextKeys);
    }
    // can use data-binding to set
    // important! notify form to detect changes
    form.setFieldsValue({
      keys: nextKeys
    });
  };

  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        const { keys, names } = values;
        console.log("Received values of form: ", values);
        console.log("Merged values:", keys.map(key => names[key]));
      }
    });
  };

  getType = val => {
    return Object.prototype.toString.call(val).slice(8, -1);
  };

  draw = (obj, key = "", arrayItem = false) => {
    const { getFieldDecorator } = this.props.form;

    const formItemLayout = {
      labelCol: {
        xs: { span: 20 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 }
      }
    };

    const desc = obj.desc || "Item";
    const value = obj.value || obj.valueItem || (arrayItem ? obj : "");

    let items;

    switch (this.getType(value)) {
      case "Array":
        items = value.map((val, index) =>
          this.draw(val, (key ? key + "_" : "") + index, true)
        );
        return (
          <div className="item-list">
            <div>
              {desc}
              {
                <Icon
                  className="dynamic-button"
                  type="plus-circle"
                  onClick={() => this.add(key)}
                />
              }
            </div>
            {items}
          </div>
        );
      case "Object":
        items = Object.keys(value).map(valKey =>
          this.draw(value[valKey], (key ? key + "_" : "") + valKey)
        );
        return (
          <div className="item-list">
            <div>
              {desc}
              {arrayItem && (
                <Icon
                  className="dynamic-button"
                  type="minus-circle-o"
                  onClick={() => this.remove(key)}
                />
              )}
            </div>
            {items}
          </div>
        );
      default:
        return (
          <Form.Item
            {...formItemLayout}
            label={desc}
            required={false}
            key={key}
          >
            {getFieldDecorator(`names[${key}]`, {
              validateTrigger: ["onChange", "onBlur"],
              rules: [
                {
                  required: true,
                  whitespace: true,
                  message: `Please input ${desc} or delete this field.`
                }
              ],
              initialValue: value || "no data"
            })(
              <Input
                placeholder={desc}
                style={{ width: "60%", marginRight: 8 }}
              />
            )}
          </Form.Item>
        );
    }
  };

  render() {
    const { getFieldDecorator, getFieldValue } = this.props.form;

    const formItemLayoutWithOutLabel = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 20, offset: 4 }
      }
    };

    getFieldDecorator("constructData", { initialValue: constructData });
    const data = getFieldValue("constructData");
    console.log(data);

    const myFormItems = this.draw(data, "top");

    return (
      <Form onSubmit={this.handleSubmit}>
        {myFormItems}
        <Form.Item {...formItemLayoutWithOutLabel}>
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
        </Form.Item>
      </Form>
    );
  }
}

const WrappedDynamicFieldSet = Form.create({ name: "dynamic_form_item" })(
  DynamicFieldSet
);
ReactDOM.render(
  <WrappedDynamicFieldSet />,
  document.getElementById("container")
);