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

原创已于 2022-08-16 19:30:40 修改 · 5.1k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2021-10-23 14:51:19 首次发布

本文详细介绍了如何在前端和后端使用JSON格式构建表格，包括单一字段、数组和混合格式的表单设计。从Form.Item的基本使用到复杂对象数组和混合格式的设置，提供了示例代码和重置策略。适合开发者理解和实践表单管理技术。

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' }

});