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

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

javascript 复制代码
// Table组件的columns
[
        {
            xxx
        },
		{
			title: '操作',
			key: 'operator',
			dataIndex: 'operator',
			align: "center",
			width: 100,
			render: (item, record) => {
				return (
					<div>
						<Button type='primary' onClick={()=> openModal(record)}>编辑</Button>
					</div>
				)
			}
		 },
]



	const openModal = (record) => {
        // 有传record说明是点击编辑
		if (record) {
            this.setState({
             //在这里把你需要填入的字段进行setState   
             })
		}
	}

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

javascript 复制代码
<Form.Item
	className={styles.formItem}
    name='blessing_list'
	label='祝福语列表'
	rules={[{ required: true, message: '请填写祝福语列表!' }]}
	initialValue={blessing_list}
>
	<Form.List name="blessing_list">
		{(fields, { add, remove }) => (
			<>
			{fields.map(({ key, name, fieldKey, ...restField }, index) => (
			    <Space key={key} align="baseline">
				    <Form.Item
					    style={{ flex: 1 }}
						{...restField}
						name={[name]}
						width={'100%'}
						fieldKey={[fieldKey]}
						label={`祝福语${index + 1}`}
						rules={[{ required: true, message: '请填写祝福语!' }]}
					>
						<Input style={{ flex: 1 }} />
					</Form.Item>
						<MinusCircleOutlined onClick={() => remove(name)} width={20} />
				</Space>
			))}
	    <Form.Item>
			<Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
				新增祝福语
			</Button>
	    </Form.Item>
			</>
			)}
    </Form.List>
</Form.Item>
相关推荐
贵沫末2 分钟前
React——基础
前端·react.js·前端框架
aklry14 分钟前
uniapp三步完成一维码的生成
前端·vue.js
Rubin9321 分钟前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子21 分钟前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户38022585982422 分钟前
使用three.js实现3D地球
前端·three.js
程序无bug24 分钟前
Spring 面向切面编程AOP 详细讲解
java·前端
zhanshuo24 分钟前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
JohnYan24 分钟前
模板+数据的文档生成技术方案设计和实现
javascript·后端·架构
撰卢1 小时前
如何提高网站加载速度速度
前端·javascript·css·html
10年前端老司机1 小时前
在React项目中如何封装一个可扩展,复用性强的组件
前端·javascript·react.js