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,
          },
        });
      }
    });
  }