react&antd(12)动态表单的默认值问题

最近遇到一个需求是有一个表单可以输入各种信息,然后还需要有一个编辑功能,点击编辑的时候需要把当前数据填入到表单里面。在网上查了很多种方法,然后我的思路是使用initialValues搭配setState()使用。默认值都为空,然后点击单条数据时把该条数据需要的字段setState()更新。

// Table组件的columns
[
        {
            xxx
        },
		{
			title: '操作',
			key: 'operator',
			dataIndex: 'operator',
			align: "center",
			width: 100,
			render: (item, record) => {
				return (
					
) } }, ] const openModal = (record) => { // 有传record说明是点击编辑 if (record) { this.setState({ //在这里把你需要填入的字段进行setState }) } }

react&antd(12)动态表单的默认值问题_第1张图片

 注意在setState的时候要按照antd需要的数据结构进行传递,以上面的祝福语列表这个Form.Item为例,此时blessing_list需要是有个数组,里面的每一项就是一行数据,["xxx","yyy"]在页面上就是如下图所示,默认是两条数据的。其他的input和select也是类似的做法。


	
		{(fields, { add, remove }) => (
			<>
			{fields.map(({ key, name, fieldKey, ...restField }, index) => (
			    
				    
						
					
						 remove(name)} width={20} />
				
			))}
	    
			
	    
			
			)}
    

你可能感兴趣的:(react&antd,react.js,javascript,前端)