封装antd Form表单，简便inline排版不方便控制每行个数和label与wrap的宽度

最新推荐文章于 2024-02-25 23:22:26 发布

一夜醒来头秃了

最新推荐文章于 2024-02-25 23:22:26 发布

阅读量2.2k

点赞数 2

分类专栏： react 插件文章标签： react.js

本文链接：https://blog.youkuaiyun.com/hs1219462412/article/details/127609949

版权

react 同时被 2 个专栏收录

13 篇文章

订阅专栏

插件

5 篇文章

订阅专栏

博客主要讲述基于antd组件进行Form表单封装成FormPro。原因是原表单中labelCol和wrapperCol难以调整inline排列，且不方便控制每行表单展示个数。

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

基于antd组件 Form表单封装FormPro
由于labelCol和wrapperCol不好去调整inline排列的表单；并且不方便控制每一行的表单展示个数；
在这里插入图片描述

import React from 'react';
import { Form, Input } from 'antd';

const index = (props) => {
	const { formItemList = [], ...formProps } = props;

	return (
		<>
			<Form
				style={{
					display: 'flex',
					justifyContent: 'space-between',
					flexWrap: 'wrap',
				}}
				colon={false}
				{...formProps}
			>
				{formItemList.map((item, idx) => {
					const { render, labelwidth, wrapperwidth, ...otherItem } = item;
					return (
						<Form.Item
							{...otherItem}
							key={String(idx)}
							label={
								item.label ? (
									<div style={{ width: labelwidth }}>
										{item.label}
										{item.colon === false ? '' : '：'}
									</div>
								) : (
									''
								)
							}
							style={{
								width: wrapperwidth,
								marginBottom: 16,
								...(item.style || {}),
							}}
						>
							{render ? render() : <Input placeholder={item.placeholder} />}
						</Form.Item>
					);
				})}
			</Form>
		</>
	);
};

export default index;

# FormPro 基于 antd v4.18.9

# 使用方法可参考 antd Form 表单文档

# 封装属性介绍

# 基本使用

\```
const [form] = Form.useForm();
const formItemList = [
	{
		name: 'test',
		label: '测试 label',
		labelwidth: 50,
		labelAlign: 'left',
		wrapperwidth: '45%',
		rules: [
			{
				required: true,
				message: '请填写内容',
			},
		],
	}，
	
];
\```

# 建议使用 form 实例

<FormPro formItemList={formItemList} form={form}>

###### 参数 ------------------- 说明 ------------------------- 类型

    formItemList          配置需要渲染的表单数据            FormItemListType[]
    labelwidth            label盒子的宽度                 number | string
    wrapperwidth          ant-form-item的容器宽度         number | string
    render                自定义渲染表单input类型          () => ReactNode