AntD为Form的List设置默认值

有一种迷茫叫一脸懵逼，当明白真相时恍然大悟。

恍然大悟

在ant design的官网中有一个demo叫动态增减表单项，非常方便的使用在动态增加选项的功能，但是并没有提供设置默认值，而且在所有使用Form.List的demo中，也都没有。!_! 一脸懵逼的表示，怎么展现默认值啊。

官网的DEMO

demo的样例代码为

      
        {(fields, { add, remove }) => {
          return (
            

              {fields.map(field => (
                
                  
                    
                  
                  
                    
                  

                   {
                      remove(field.name);
                    }}
                  />
                
              ))}

              
                 {
                    add();
                  }}
                  block
                >
                   Add field
                
              
            
          );
        }}
      

      
        
          Submit
        
      
    

展示的效果为

默认状态

设置默认值

在antd的4.x版本中，在form层级上使用initialValues来设置默认值。

添加了initialValues并为name为“users”的Form.List设置默认值。完整的代码为

      
        {(fields, { add, remove }) => {
          return (
            

              {fields.map(field => (
                
                  
                    
                  
                  
                    
                  

                   {
                      remove(field.name);
                    }}
                  />
                
              ))}

              
                 {
                    add();
                  }}
                  block
                >
                   Add field
                
              
            
          );
        }}
      

      
        
          Submit
        
      
    

运行的默认效果为：

有默认值的效果

不明白时千难万难，举步维艰。当看到真相的时候，一马平川，神清气爽！！！

// END 喜欢秋天的风，带着点点的果香