antd表单 Form.Item,Form.List 的自定义数据格式

目录

1. { }

2. [ {},{},{} ]

3. 复杂混合的格式

1）{  a : ' ',  b : [ {}, {} ]  }

2）{  a : ' ',  b : { c：' ',  d：' ' }  }

---

1. 常用格式

{ }

  表单内容：

<Form>
    <Form.Item
        name={'name'}
        lable={'用户'}
    > 
        <Input placeholder='请输入'/>
    </Form.Item>
    <Form.Item
        name={'ip'}
        lable={'IP地址'}
    > 
        <Input placeholder='请输入'/>
    </Form.Item>
    <Form.Item
        name={'port'}
        lable={'端口'}
    >
       <Input placeholder='请输入'/>
    </Form.Item>
</Form>

//{ 
//  name:'',
//  ip:'',
//  port:'',
//}

重置内容：    form.setFieldsValue({ neme: 'a'  }); 

2. 对象数组格式

[ {},{},{} ]

 表单内容：

<Form>
<Form.List name="servers">
{(fields)=>{
    retrun (
        <>
          {fields.map((field,index)=>{
              <Form.Item
                key={field.key}
                name={[filed.name, 'name']}
                lable={'用户'}
              > 
                <Input
                    onchange={(e)=>{
                       form.getFiledValue('servers')[index].name = e.target.value;
                    }}
                />
              </Form.Item>
              <Form.Item
                key={field.key}
                name={[filed.name, 'ip']}
                lable={'IP地址'}
              > 
                <Input
                    onchange={(e)=>{
                       form.getFiledValue('servers')[index].ip=e.target.value;
                    }}
                />
              </Form.Item>
              <Form.Item
                key={field.key}
                name={[filed.name, 'port']}
                lable={'端口'}
              >
                <Input
                    onchange={(value)=>{
                       form.getFiledValue('servers')[index].port=value;
                    }}
                />
              </Form.Item>
           });
          }
        </>
    );
}}
</Form.List>
</Form>

//{ 
//  servers:[{name:'',ip:'',port:''},{name:'',ip:'',port:''},{name:'',ip:'',port:''}]
//}

 重置内容：    form.getFiledValue('servers')[index].name = 'a'; 

3. 复杂混合的格式

1）单项和数组组合格式

{  a : ' ',  b : [ {}, {} ]  }

表单内容：

<Form>
 <Form.Item
    name={'name'}
    lable={'用户'}
    > 
    <Input placeholder='请输入'/>
 </Form.Item>
 <Form.List name="ipAndPorts">
 {(fields)=>{
    let items=form.getFieldValue('ipAndPorts');
    retrun (
        <>
          {fields.map((field,index)=>{
              <Form.Item
                key={field.key}
                lable={'IP地址'}
              > 
                <Input
                    defaultValue = {items[index].ip}
                    onchange={(value)=>{
                       form.getFiledValue('ipAndPorts')[index].ip=value;
                    }}
                />
                <span>端口：</span>
                <Input
                    defaultValue = {items[index].port}
                    onchange={(value)=>{
                       form.getFiledValue('ipAndPorts')[index].port=value;
                    }}
                />
              </Form.Item>
           });
          }
        </>
    );
 }}
 </Form.List>
</Form>

//{ 
//  name:'',
//  ipAndports:[{ip:'',port:''},{ip:'',port:''},{ip:'',port:''}]
//}

 重置内容：    form.setFieldsValue({ neme: 'a'  }); 

                       form.getFiledValue('ipAndports')[index].ip = '10.0.0.10'; 

2）单项和对象组合格式

{  a : ' ',  b : { c：' ',  d：' ' }  }

表单内容：

<Form>
 <Form.Item
    name={'name'}
    lable={'用户'}
    > 
    <Input placeholder='请输入'/>
 </Form.Item>
 <Form.List 
    name= {['server','ip']}
    lable={'服务器IP'}
 >
    <Input placeholder='请输入'/>
 </Form.List>
 <Form.List 
    name= {['server','post']}
    lable={'端口'}
 >
    <Input placeholder='请输入'/>
 </Form.List>
</Form>

//{ 
//  name:'',
//  server:{ip:'',port:''},
//}

重置内容：    form.setFieldsValue({ neme: 'a'  }); 

                       form.setFiledValue({

                                server: { ip:  '10.0.0.10' }

                        });