From.List用法详解

1.Form.List用法好处：可以使用antd中自带的验证。

2.不可控组件，用法简单

使用栗子：https://codesandbox.io/s/wonderful-lichterman-br63z?file=/index.js:1723-1742

可在form中加入初始值：

Form.List中可以有多个字段，name要定义为

name={[field.name, "lastName"]} //第二项是组内设置的name值
fieldKey={[field.fieldKey, "lastName"]}

      <Form.List name="users">{(fields, { add, remove }) => {/*** `fields` internal fill with `name`, `key`, `fieldKey` props.* You can extends this into sub field to support multiple dynamic fields.*/return (<div>{fields.map((field, index) => (<Row key={field.key}><Col><Form.Itemname={[field.name, "lastName"]}fieldKey={[field.fieldKey, "lastName"]}rules={rules}><Input placeholder="last name" /></Form.Item></Col><Col><Form.Itemname={[field.name, "firstName"]}fieldKey={[field.fieldKey, "firstName"]}rules={rules}><Input placeholder="first name" /></Form.Item></Col><Col flex="none"><MinusCircleOutlinedclassName="dynamic-delete-button"onClick={() => {remove(field.name);}}/></Col></Row>))}<Form.Item><Buttontype="dashed"onClick={() => {add();}}style={{ width: "100%" }}><PlusOutlined /> Add field</Button></Form.Item></div>);}}</Form.List><Form.Item><Button type="primary" htmlType="submit">Submit</Button></Form.Item>

3、如何给Form.List添加默认值：（使用initialValues）

<Form form={form} onFinish={onFinish} onFinishFailed={onFinishFailed} initialValues={{list: itemList}}><h2>优惠方案</h2><Form.List name='list'>{(fields, { add, remove }) => {console.log(fields);return (<div>{fields.map((field, index) => (<div className="row group" key={field.key}><Form.Item className='num'name={[field.name, 'minRange']}fieldKey={[field.fieldKey, 'minRange']}rules={[{validator: handleValitorMin} ]}><Input placeholder={2} addonAfter="人" type='number' /></Form.Item><span className='row-span'>——</span><Form.Item className='num' name={[field.name, 'maxRange']}fieldKey={[field.fieldKey, 'maxRange']}rules={[{validator: handleValitorMax }]}><Input addonAfter='人' type='number' /></Form.Item><span className='row-span'>的团报选手享受</span><Form.Item className='num discount'name={[field.name, 'discount']}fieldKey={[field.fieldKey, 'discount']}rules={[{validator: handleValitorDiscount}]}><Input addonAfter={selectAfter} placeholder="0-10整数或小数" type='number' /></Form.Item><span className="close-icon"><CloseCircleFilledclassName="dynamic-delete-button"onClick={() => {remove(field.name);}}/></span></div>))}<ButtononClick={handleAddItem}style={{ width: '80px' }}><PlusOutlined />新增</Button></div>);}}</Form.List></Form>

4、Form.List添加验证：（使用validator，自定义验证）

const handleValitorMax = (rule, value, callback)=>{let arr = rule.field.split('.');let index = Number(arr[1]) || 0;let discountItem = form.getFieldValue('list');let prevNum = Number(discountItem[index].minRange) || 2;value = Number(value);// console.log('max:', arr, prevNum, discountItem);if (!value) {return  Promise.reject('人数必填');}else if(value <= prevNum){return Promise.reject('人数要大于最小人数');}return  Promise.resolve();};

5、Form.List自定义添加一项（不使用默认的add方法）

const handleAddItem = ()=>{const list = form.getFieldValue('list');const nextList = list.concat(discountObj);form.setFieldsValue({list: nextList,});};

From.List用法详解相关推荐

python argv 详解_Python3 sys.argv[ ]用法详解
sys.argv[]说白了就是一个从程序外部获取参数的桥梁,这个"外部"很关键,因为我们从外部取得的参数可以是多个,所以获得的是一个列表(list),也就是说sys.argv其实可 ...
oracle中的exists 和 not exists 用法详解
from:http://blog.sina.com.cn/s/blog_601d1ce30100cyrb.html oracle中的exists 和 not exists 用法详解 (2009-05- ...
ROW_NUMBER() OVER()函数用法详解（分组排序例子多）
ROW_NUMBER() OVER()函数用法详解 (分组排序例子多) https://blog.csdn.net/qq_25221835/article/details/82762416 post ...
python的继承用法_【后端开发】python中继承有什么用法？python继承的用法详解
本篇文章给大家带来的内容是关于python中继承有什么用法?python继承的用法详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 面向对象三大特征 1.封装:根据职责将属性和方法 ...
C++中substr()函数用法详解
C++中substr()函数用法详解原型: string substr (size_t pos = 0, size_t len = npos) const; 返回一个新构造的string对象,其值初 ...
php theme_path,PHP_Yii2主题(Theme)用法详解，本文实例讲述了Yii2主题(Theme) - phpStudy
Yii2主题(Theme)用法详解本文实例讲述了Yii2主题(Theme)用法.分享给大家供大家参考,具体如下: 首先看看主要的配置方式: 'components' => [ 'view' = ...
LayoutInflater的inflate函数用法详解
LayoutInflater的inflate函数用法详解 LayoutInflater作用是将layout的xml布局文件实例化为View类对象. 获取LayoutInflater的方法有如下三种: ...
Ext.Net学习笔记22：Ext.Net Tree 用法详解
上面的图片是一个简单的树,使用Ext.Net来创建这样的树结构非常简单,代码如下: <ext:TreePanel runat="server"><Root> ...
WinDbg用法详解
WinDbg用法详解对WinDbg的方方面面作了详细的讲解. 转载于:https://blog.51cto.com/laokaddk/125111
ios开发读取剪切板的内容_iOS中管理剪切板的UIPasteboard粘贴板类用法详解
一.自带剪切板操作的原生UI控件在iOS的UI系统中,有3个控件自带剪切板操作,分别是UITextField.UITextView与UIWebView.在这些控件的文字交互处进行长按手势可以在屏幕视图 ...

From.List用法详解

From.List用法详解相关推荐

最新文章

热门文章