antd动态增减表单如何使用mapPropsToFields方式信息回填?

Question

问题描述

1.目前通过setFieldsValue方法能后触发信息回填，但是通过mapPropsToFields方式无法信息回填。
2.实际业务开发中表单字段通常很多，且一些字段的显隐都有条件约束，用setFieldsValue方式回填必须要先考虑将满足条件的表单字段展示出来再回填，否则回填不上，这种做法的成本会变的很高。

相关代码

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

const FormItem = Form.Item;
const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 }
};

const FormDetail = props => {
  const { form } = props;
  const { getFieldDecorator } = form;

  form.getFieldDecorator("keys", { initialValue: [0, 1] });
  const list = form.getFieldValue("keys") || [];
  const formItems = list.map(k => (
    <Form layout="horizontal" autoComplete="off" {...formItemLayout} key={k}>
      <FormItem label={`表单模块${k}`}>
        {getFieldDecorator(`labName[${k}]`)(<Input />)}
      </FormItem>
    </Form>
  ));

  const onClick = () => {
    form.setFieldsValue({ labName: ["手动赋值1", "手动赋值2"] });
  };
  return (
    <div>
      <Button onClick={onClick}>手动赋值</Button>
      {formItems}
    </div>
  );
};

let fieldsName = ["labName"];
let Son = Form.create({
  mapPropsToFields(props) {
    let p = {};
    fieldsName.forEach(
      key => (p[key] = Form.createFormField({ value: props[key] }))
    );
    console.log(p);
    return p;
  }
})(FormDetail);

const Parent = () => {
  const [state, setstate] = useState({});
  const backInfo = () => {
    setstate({ labName: ["1", "2"] });
  };
  return (
    <div>
      <Son {...state} />
      <Button onClick={backInfo}>信息回填</Button>
    </div>
  );
};

ReactDOM.render(<Parent />, document.getElementById("root"));

Answer 1

mapPropsToFields(props) {

let p = {};
fieldsName.forEach(
  key => {
      props[key].forEach((val, index) => {
          const name = `${key}[${index}]`;
          p[name] = Form.createFormField({ value: val });
      })
  }
);
return p;

}

// mapPropsToFields 方式回填是对字段的设置，所以必须要依次设置每个字段；setFieldsValue方法是对值的回填，二者的应用范畴不一样