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

目录

1. { }

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

3. 复杂混合的格式

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

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

1. 常用格式

{ }

表单内容：

<Form><Form.Itemname={'name'}lable={'用户'}><Input placeholder='请输入'/></Form.Item><Form.Itemname={'ip'}lable={'IP地址'}><Input placeholder='请输入'/></Form.Item><Form.Itemname={'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.Itemkey={field.key}name={[filed.name, 'name']}lable={'用户'}><Inputonchange={(e)=>{form.getFiledValue('servers')[index].name = e.target.value;}}/></Form.Item><Form.Itemkey={field.key}name={[filed.name, 'ip']}lable={'IP地址'}><Inputonchange={(e)=>{form.getFiledValue('servers')[index].ip=e.target.value;}}/></Form.Item><Form.Itemkey={field.key}name={[filed.name, 'port']}lable={'端口'}><Inputonchange={(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.Itemname={'name'}lable={'用户'}><Input placeholder='请输入'/></Form.Item><Form.List name="ipAndPorts">{(fields)=>{let items=form.getFieldValue('ipAndPorts');retrun (<>{fields.map((field,index)=>{<Form.Itemkey={field.key}lable={'IP地址'}><InputdefaultValue = {items[index].ip}onchange={(value)=>{form.getFiledValue('ipAndPorts')[index].ip=value;}}/><span>端口：</span><InputdefaultValue = {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.Itemname={'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'}

});