需求效果功能如图：
代码：
<Form.Item
label="关联链接"
vvspan={24}
labelCol={{ md: 3 }}
wrapperCol={{ md: 21 }}
style={{ marginBottom: ‘0‘ }}
>
<span
style={{
color: urlList.length < 20 ? ‘#FFA22D‘ : ‘rgba(0, 0, 0, 0.25)‘,
cursor: ‘pointer‘
}}
onClick={add}
>
添加链接
</span>
</Form.Item>
<Col vvspan={24} offset={3} className={styles.relateLinkList}>
{urlList.map(k => (
<Form.Item vvspan={24} labelCol={{ md: 3 }} wrapperCol={{ md: 21 }}>
<div key={k} style={{ position: ‘relative‘ }}>
{getFieldDecorator(`relateLinkList[${k}]`, {
validateTrigger: [‘onBlur‘],
rules: [
{
min: 1,
max: 2000,
message: ‘不可超过2000字‘
},
{
pattern: /^(ht|f)tps?:\/\/(([a-zA-Z0-9_-])+(\.)?)*(:\d+)?(\/((\.)?(\?)?=?&?([a-zA-Z0-9_-]|#|%)(\?)?)*)*$/i,
message: ‘请输入有效网址！‘
}
]
})(
<Input
style={{ width: ‘100%‘, paddingRight: ‘30px‘, boxSizing: ‘border-box‘ }}
/>
)}
<i
className="icon iconfont iconshanchu"
style={{
position: ‘absolute‘,
right: ‘12px‘,
top: ‘0‘,
cursor: ‘pointer‘,
color: ‘#333333‘
}}
onClick={() => remove(k)}
/>
</div>
</Form.Item>
))}
</Col>
备注：这里遍历重新添加form.item的原因是加了网址校验，如果只遍历getFieldDecorator，校验只校验第一条数据
方法：
const remove = k => {
setUrlList(urlList.filter(key => key !== k));
};
const add = () => {
const keys = form.getFieldValue(‘relateLinkList‘);
if (urlList.length < 20) {
if ((keys && keys[keys.length - 1]) || keys === undefined) {
const nextKeys = urlList.concat(urlList.length + 1);
setUrlList(nextKeys);
}
} else {
message.error(‘上限20个‘);
}
};
数据提交的校验：
const newLinkList = values.relateLinkList && values.relateLinkList.filter(item => !!item);
const params = {
...values,
id: 0,
relateLinkList: newLinkList,
};
const result = await launchTask(params);
if (result.code === 10000) {
message.success(result.msg);
router.goBack();
pageTabUtil.closeTab(‘/work/task/addTask‘);
} else {
message.error(result.msg);
}
原文：https://www.cnblogs.com/nangras/p/13161805.html