React的form表单的动态生成

需求： 根据工资项来增加不同的工资项，然后根据不同的工资项动态生成from表单，来进行用户工资的增删改查。

分析： 现在做的功能是在增加工资项的时候，会将数据生成一个大的JSON字符串给后台，后台直接存储到数据库中，这样做感觉前端会拿和存数据的时候回老实进行数据的操作，感觉有点麻烦，我自己认为，应该应该在数据库单独建立一个动态数据的表，这样操作会简单一点，也方便自己的数据存取，和修改，你要修改那一条数据可以单个数据修改，就不用操作一整条数据，这只是个人见解和看法，但是赶项目没考虑那么多想到怎么快点做出来就好了，后面总结的时候想到的。

如果还有更好办法的小伙伴欢迎讨论和探讨，这些只是日常工作中感觉有用和经常会用的到的经验和总结，我也是react的小白，以前都是些后台的现在，前后一起搞

// 根据查询出来的值进行动态生成from表单
const JSList = JSON.parse(xgSelectedRows.salaryDetail);
{JSList && (
  _.map(JSList, (item) => {
    return (
      <Col md={8} sm={24}>
        <FormItem
          label={item.item}
        >
          {getFieldDecorator(`${item.item}-&${item.key}`, {
            initialValue: item.value,
            validateTrigger: 'onBlur',
            rules: [{
              required: true,
              message: `必输 请输入${item.item}`,
            }],
          })(<Input placeholder="必填 请输入" style={{ width: '100%' }} />)}
        </FormItem>
      </Col>
    );
  })
)}

这是当你提交给后台的数据要进行处理，要根据你们后台要的样式来处理这是我的样式数据的处理方式，仅供参考。

//提交取值处理

updateHandleOk = (e) => {
    // const { dispatch } = this.props;
    const { xgSelectedRows } = this.state;
    e.preventDefault();
    const salaryDetail1 = [];
    this.props.form.validateFieldsAndScroll((err, values) => {
      _.map(values, (item, key) => {
        if (/-&/.test(key)) {
          const lis = key.split('-&');
          salaryDetail1.push(`{"item":"${lis[0]}","value":"${item}","key":"${lis[1]}"}`);
        }
      });
      if (!err) {
        this.props.dispatch({
          type: 'salary/update',
          payload: {
            lgcSn: xgSelectedRows.lgcSn,
            remark: values.remark,
            salaryMonth: (values.salaryMonth).format('YYYYMM'),
            salaryDetail: salaryDetail1,
          },
        });
      }
    });
  }