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.Item
name={[field.name, "lastName"]}
fieldKey={[field.fieldKey, "lastName"]}
rules={rules}
>
<Input placeholder="last name" />
</Form.Item>
</Col>
<Col>
<Form.Item
name={[field.name, "firstName"]}
fieldKey={[field.fieldKey, "firstName"]}
rules={rules}
>
<Input placeholder="first name" />
</Form.Item>
</Col>
<Col flex="none">
<MinusCircleOutlined
className="dynamic-delete-button"
onClick={() => {
remove(field.name);
}}
/>
</Col>
</Row>
))}
<Form.Item>
<Button
type="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">
<CloseCircleFilled
className="dynamic-delete-button"
onClick={() => {
remove(field.name);
}}
/>
</span>
</div>
))}
<Button
onClick={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,
});
};