表单函数封装

`
function isNil(obj) {
return obj == null;
}

export function buildFormItem(decorator, item, key) {
const {
id,
label,
extra,
layout,
props,
value,
rules,
options,
input,
required,
additional,
} = item;

// FormItem props
const mergedProps = { …props, …layout };
if (label) {
mergedProps.label = label;
}
if (extra) {
mergedProps.extra = extra;
}
if (!isNil(key)) {
mergedProps.key = key;
}

if (required) {
mergedProps.required = true;
}

const mergedOptions = isNil(value)
? { …options, rules }
: { …options, rules, initialValue: value };

return (
<Form.Item {…mergedProps}>
{decorator(id, mergedOptions)(input)}
{additional || null}
</Form.Item>
);
}

export default function buildFormItems(decorator, items) {
return items.map((item, index) => buildFormItem(decorator, item, item.id || index));
}`

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
封装 ant 表单可以提高代码复用性和可维护性。下面是一个简单的例子,演示如何使用 HOC 封装 ant 表单组件: ```jsx import React from 'react'; import { Form, Input, Button } from 'antd'; const CustomForm = (props) => { const { form, handleSubmit, children } = props; const onFinish = (values) => { handleSubmit(values); }; return ( <Form form={form} onFinish={onFinish}> {children} <Button type="primary" htmlType="submit"> Submit </Button> </Form> ); }; const WrappedCustomForm = Form.create({ name: 'custom_form', })(CustomForm); // 使用例子 const Demo = () => { const handleFormSubmit = (values) => { console.log('Received values of form: ', values); }; return ( <WrappedCustomForm handleSubmit={handleFormSubmit}> <Form.Item label="Username" name="username"> <Input /> </Form.Item> <Form.Item label="Password" name="password"> <Input.Password /> </Form.Item> </WrappedCustomForm> ); }; ``` 在这个例子中,我们定义了一个 `CustomForm` 组件,它接收一个 `handleSubmit` 属性作为回调函数,用于处理表单提交事件。`CustomForm` 组件内部使用了 antd 的 `Form` 组件,将 `handleSubmit` 函数绑定到 `Form` 的 `onFinish` 事件上。我们还可以通过 `children` 属性向 `CustomForm` 组件传递表单元素,这些元素会被渲染到 `Form` 组件中。最后,我们使用 `Form.create()` 方法将 `CustomForm` 组件进行封装,生成一个新的组件 `WrappedCustomForm`,并将其导出供外部使用。在使用 `WrappedCustomForm` 组件时,我们只需要传递 `handleSubmit` 属性和表单元素即可。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值