如何给antd的formLIst添加带有默认值的表单

一、在antd中我们知道有动态添加表单的方法，组件如图所示：

点击add Field之后会出现一组空的inpout框，效果如下：

点击进入antd官网相关用例

二、但是有些时候这些场景并不能满足我们，在近期的一个开发中我就遇到了这样的问题，如下：

1)、问题场景：

表单默认显示第一排的表单，当点击添加字段时要新增一排表单，并给最后的那个输入框一个默认值。（自己在网上找了半天也没找到自己想要的，在求教了同事之后，发现如此简单。所以想要给大家分享一下。）

2）、解决思路

个人解决思路（没解决问题）：

我本来想的是在创建它的时候给该输入框一个默认值不就行了吗。于是我再创建它的时候直接加上了一个defaultValue:'comment',在创建的时候果然在输入框里有个comment,但是，当我直接点击表单的提交按钮时，因为设置的是必填项，所以表单报错，我思考了好久，想着这不是已经显示在里面了吗，为什么表单校验的时候还是显示请让我输入呢，原来在表单创建的时候给定的值在创建的时候被替换掉了，虽然显示没有问题，但是打印表单的话发现，确实是空的。

正确的解决方案：

原来在formList中官方已经给封装好了添加和删除的方法（再次告诫大家一定要多看方法注释）。

如图所示很简单：(parameter) add: (defaultValue?: any, insertIndex?: number) => void
及add是官方给我们写好的方法，我们只需要给add传上我们想要设置的FormItem的字段名加上想要设置的值即可及defaultValue?: any，然后我们还要告诉这个函数我们想要给第几个添加的表单设置初始值及insertIndex?:number,因为我想在每次添加的时候都给新加的表单设置一个初始值，所以我传入的是生成新表单之前表单的长度来当坐标，刚好表示我新创建的表单的下标。add({ commont: 'comment' }, val.length);
相关代码如下：

//因为是函数式的组件，所以直接从fields中通过箭头函数的形式拿到了add和remove这俩方法。
 <Form.List name="columnList">
              {
    
    (fields, {
     
      add, remove }) => {
    
    
                const val = [];
                const formVal = form.getFieldsValue().columnList;
                fields.map((item, index) => {
    
    
                  val.push(item);//将表单的值赋值给val,在此可以对原表单的值进行修改
                });
                ...
                 }}
            </Form.List>

//点击添加字段按钮调用add
<Form.Item>
                        <Button
                          style={
    
    {
    
    
                            width: '96px',
                            height: '40px',
                            position: 'absolute',
                            top: '0px',
                          }}
                          onClick={
    
    () => {
    
    
                            add({
    
     commont: 'comment' }, val.length);
                          }}
                          block
                        >
                          添加字段
                        </Button>
                      </Form.Item>