react动态表单

最新推荐文章于 2025-10-12 04:01:35 发布

原创

最新推荐文章于 2025-10-12 04:01:35 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

本文将探讨如何在React中创建动态表单，通过AdvanceSearchForm组件为例，结合data.js和index.js的代码，深入理解React的状态管理和表单控件交互，揭示前端开发中的表单动态构建技巧。

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