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