Ant Design Form.List基础用法

使用 Form.List 使用

项目中需要在新增可以多个如图

代码如下

javascript 复制代码
// An highlighted block
<Card 
                    title="产品信息" 
                    bordered={false}>
                    <Form.List name="productList" >
                            {(fields, {add, remove}) => (
                              <>
                                {fields.map((field) => (
                                    <Row  gutter={16} >
                                                {/* 用得时候只需要修改下面,将需要重复展示的部分替换下面部分即可 注意 -----start*/ }
                                                <Col sm={24} md={12} lg={8} xxl={6}>
                                                        <Form.Item 
                                                            label="产品名称"
                                                            {...field}
                                                            name={[field.name,"wuMiao"]}
                                                            rules={[{
                                                                    required: true,
                                                                    message: '请输入',
                                                                },]}
                                                                >
                                                            <Input placeholder="input placeholder" />
                                                        </Form.Item>
                                                </Col>
                                                <Col sm={24} md={12} lg={8} xxl={6}>
                                                        <Form.Item 
                                                            {...field}
                                                            label="物料编号"
                                                            name={[field.name,"bianHao"]}
                                                            rules={[{
                                                                    required: true,
                                                                    message: '请输入',
                                                                },]}
                                                                >
                                                            <Input placeholder="input placeholder" />
                                                        </Form.Item>
                                                </Col>
                                               
                                                <Col sm={24} md={12} lg={8} xxl={6}>
                                                
                                                        <Form.Item 
                                                            {...field}
                                                            label="借用数量"
                                                            name={[field.name,"jNumber"]}
                                                            rules={[{
                                                                    required: true,
                                                                    message: '请输入',
                                                                },]}
                                                                >
                                                            <InputNumber 
                                                              min={1} placeholder="请输入数量"
                                                              style={{width:'100%'}} />
                                                        </Form.Item>
                                                </Col>
                                                <Col sm={24} md={12} lg={8} xxl={6}>
                                                
                                                        <Form.Item 
                                                            {...field}
                                                            label="提货方式"
                                                            name={[field.name,"tType"]}
                                                            rules={[{
                                                                    required: true,
                                                                    message: '请输入',
                                                                },]}
                                                                >
                                                            <Select>
                                                                <Select.Option value="you">邮寄</Select.Option>
                                                                <Select.Option value="zi">自提</Select.Option>
                                                            </Select>
                                                        </Form.Item>
                                                </Col>
                                                { /* 用得时候只需要修改下面,将需要重复展示的部分替换下面部分即可 -----end*/ }
                                                        
                                                <div styleName="item_btn_wrap">
                                                    <PlusCircleFilled styleName="add_item_btn" onClick={() => add({tType:'zi'})} />
                                                    {fields.length>1&&<CloseCircleFilled  styleName="remove_item_btn" onClick={() => remove(field.name)} />}
                                                </div>
                                    </Row>
                                ))}
                                </>

                            )}

                    </Form.List>
                </Card>

其中add 方法可以添加参数,为添加的默认参数

注意:

{...field} 一定要放在 name={[field.name,'XXX']} 的前面,否则就会出错

以上共勉

相关推荐
千码君201612 小时前
React Native:发现默认参数children【特殊的prop】
javascript·react native·ecmascript·react·组件树
前端OnTheRun7 天前
React18学习笔记(四) 路由案例--记账本
react·router
whltaoin9 天前
Vue 与 React 深度对比:技术差异、选型建议与未来趋势
前端·前端框架·vue·react·技术选型
PyAIGCMaster14 天前
我的项目开发的一般流程,供交流
react·nextjs
aesthetician15 天前
ReactFlow:构建交互式节点流程图的完全指南
前端·流程图·react
fcm1916 天前
(6) tauri之前端框架性能对比
前端·javascript·rust·前端框架·vue·react
知识分享小能手16 天前
React学习教程,从入门到精通,React 前后端交互技术详解(29)
前端·javascript·vue.js·学习·react.js·前端框架·react
知识分享小能手17 天前
React学习教程,从入门到精通,React Router 语法知识点及使用方法详解(28)
前端·javascript·学习·react.js·前端框架·vue·react
知识分享小能手1 个月前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
lypzcgf1 个月前
Coze源码分析-资源库-创建知识库-前端源码-核心组件
前端·typescript·react·coze·coze源码分析·ai应用平台·agent开发平台