antd 动态添加表单_react+antd form表单项动态添加数据的实现

需求效果功能如图：

代码：

const [relateList, setRelateList] = useState(getPath(initInfo, 'relateLinkList', [] || []));

这个是因为此页面还实现了编辑功能，需要渲染初始数据，此时需要监听一个已有的列表，进行删除时候的删除处理，否则初始化后删除会出问题

label="关联链接"

vvspan={24}

labelCol={ { md: 3 }}

wrapperCol={ { md: 21 }}

style={ { marginBottom: '0' }}

>

style={ {

color: urlList.length < 20 ? '#FFA22D' : 'rgba(0, 0, 0, 0.25)',

cursor: 'pointer'

}}

onClick={add}

>

添加链接

{urlList.map(k => (

{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: '请输入有效网址！'

}

],

initialValue: getPath(relateList, `${k - 1}`, '')

})(

style={ { width: '100%', paddingRight: '30px', boxSizing: 'border-box' }}

/>

)}

className="icon iconfont iconshanchu"

style={ {

position: 'absolute&#