react动态表单

最新推荐文章于 2025-03-30 09:31:42 发布

在座的各位都是菜杯

最新推荐文章于 2025-03-30 09:31:42 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： react 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/coderYYA/article/details/123077838

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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