react动态表单

关注

VIP免费原创最新推荐文章于 2026-06-13 10:14:24 发布 1.2k 阅读 AI 写同款· GEO 优化 ›

React Antd Form.List 组件嵌套多级动态增减表单 + 表单联动复制实现目前想到是用浏览器本地存储存下每次的 storeId 值，仅在有值的才写进去，每次读取 storeId 时候先判断 props 传过来的是否是空值，是空值就从 storage 里面取。问题一：复制的时候由于存在表单联动，直接获取 form 对应字段的值虽然能附上值但是复制出来的下拉框没值，因为 useMemo 发生变化。复制时传给子组件的 id 为先为有效值后不存在，所以缓存的下拉框选项值变为空。有一个页面的组件，其中一部分需要用到。综合以上需求，大致的页面样子。阅读详情

AdvanceSearchForm组件

/*
 * @Description:
 * @Date: 2022-02-22 17:36:28
 * @LastEditTime: 2022-02-22 21:24:53
 * @FilePath: \testpull\githubreact\src\pages\AdvanceSearchForm\index.jsx
 */
import React, { useState } from 'react'
import { Form, Row, Col, Button } from 'antd'
import { DownOutlined, UpOutlined } from '@ant-design/icons'
import renderFormItem from './utils/index'
import searchFieldsList from './utils/data'
const AdvancedSearchForm = () => {
	const [expand, setExpand] = useState(false)
	const [form] = Form.useForm()

	// 渲染表单子项函数
	const renderFields = () => {
		const formItemList = searchFieldsList.map((item) => {
			return (
				<Col xs={20} sm={20} md={8} lg={8} xl={8} xxl={8} key={item.field}>
					<Form.Item
						name={item.field}
						initialValue={item.initialValues}
						label={item.labal}
						rules={item.rules}
					>
						{renderFormItem(item)}
					</Form.Item>
				</Col>
			)
		})
		return formItemList
	}

	c