🧐[问题]ProForm - 高级表单怎么实现自定义组件呢？

[vearvip]

🧐 问题描述

ProForm - 高级表单提供的组件并不能满足所有的场景，有些情况还需要自定义组件，请问怎么自定义组件呢？

[rrbe]

我是按 ant design 的方式包了一层 Form.Item，FormItem 里包的自定义组件实现 value 和 onChange 就可以了。ProForm 应该只是一层包装，本质还是 Form 这个组件

[chenshuai2144]

@rrbe 专业

[my9988]

我是按 ant design 的方式包了一层 Form.Item，FormItem 里包的自定义组件实现 value 和 onChange 就可以了。ProForm 应该只是一层包装，本质还是 Form 这个组件

希望大侠能给具体的例子示范下。

[rrbe]

@my9988 看看文档吧，文档已经更新过了。https://procomponents.ant.design/components/form

[my9988]

@rrbe 感谢回复，我是照做了，编译不过，是哪里写错了呢？

[chenshuai2144]

Form 是从 antd 里引入的

[my9988]

Form 是从 antd 里引入的 是的，是按你说的

import Form, { Button, message, Input, Drawer, Checkbox } from 'antd';

[chenshuai2144]

放到括号里 你在反串黑吗？

import {Form, Button, message, Input, Drawer, Checkbox } from 'antd';

[my9988]

@chenshuai2144 我这么非得想自定义组件，其实目的是想对某个字段不想上下布局，不知道如何定义，比如如下，如果水平布局能好看，

[chenshuai2144]

应该可以设置 layout 的吧，我记得 antd 支持了

[my9988]

应该可以设置 layout 的吧，我记得 antd 支持了

这个我不敢确认是否有，反正我没找到方法，以前我 看到你的一个回复ProForm 用layout的，这样是对所有字段都生效。我是希望咱们的ProComponent 支持单个字段的定义，别那么千篇一律一个样式(上下,antd是左右)。比如ProFormCheckbox 用layout,api写了支持，没明白怎么写

[chenshuai2144]

这个是antd的能力

标准才能高效 我们的目标就是只关注逻辑不关注界面

[SodaNYC]

proFrom tag里加layout="Horizontal"即可

@chenshuai2144 我这么非得想自定义组件，其实目的是想对某个字段不想上下布局，不知道如何定义，比如如下，如果水平布局能好看，

[my9988]

proFrom tag里加layout="Horizontal"即可

@chenshuai2144 我这么非得想自定义组件，其实目的是想对某个字段不想上下布局，不知道如何定义，比如如下，如果水平布局能好看，

你这个定义是不是所有的都是水平布局了？我原来的问题是部份是上下，可以单独定义水平的，不是对所有

[chenshuai2144]

这个现在是不支持的，可以等 antd 支持一下

[SodaNYC]

proFrom tag里加layout="Horizontal"即可

@chenshuai2144 我这么非得想自定义组件，其实目的是想对某个字段不想上下布局，不知道如何定义，比如如下，如果水平布局能好看，

你这个定义是不是所有的都是水平布局了？我原来的问题是部份是上下，可以单独定义水平的，不是对所有

不好意思，是的，我这个是对全局的，单独的对某个字段不想上下布局好像确实不行

[ChinaHDJ1]

那么关于width有什么方法能解决吗？

[joker77877]

我觉得要么就所有antd的组件都支持，要么就搞一个自定义的组件，只支持一部分其实感觉不太友好

[joker77877]

那么关于width有什么方法能解决吗？

加个class吧

[wuxushun]

同感，现在pro真的越来越重，越来越难用。

[LeeRayno]

自定义组件在 ProFormList 里面使用 Form.Item 就不生效了, 需要使用 PromForm.Item

  {/* 这里生效 */}
 <Form.Item name="email" label={'邮箱'} rules={[{ validator: emailValidator }]}>
      <TrimText />
 </Form.Item>

 {/* 这里不生效 */}
<ProFormList name="emails" min={0} max={10} initialValue={[{}]} copyIconProps={false}>
    {/* <ProFormText name="email" label={'邮箱'} rules={[{ validator: emailValidator }]} /> */}
    <Form.Item name="email" label={'邮箱'} rules={[{ validator: emailValidator }]}>
     {/* 自定义的 trim 组件 获取不到表单的值 */}
      <TrimText />
    </Form.Item>
</ProFormList>

{/* ProFormList 里面需要用 ProForm.Item 而不是 Form.Item */}
<ProFormList name="phones" min={0} max={10} initialValue={[{}]} copyIconProps={false}>
      {/* <ProFormText name="phone" label={'电话'} rules={[{ validator: telValidator }]} /> */}
      <ProForm.Item name="phone" label={'电话'} rules={[{ validator: telValidator }]}>
        <TrimText />
      </ProForm.Item>
</ProFormList>

[ZhongYic00]

自定义组件在 ProFormList 里面使用 Form.Item 就不生效了, 需要使用 PromForm.Item

  {/* 这里生效 */}
 <Form.Item name="email" label={'邮箱'} rules={[{ validator: emailValidator }]}>
      <TrimText />
 </Form.Item>

 {/* 这里不生效 */}
<ProFormList name="emails" min={0} max={10} initialValue={[{}]} copyIconProps={false}>
    {/* <ProFormText name="email" label={'邮箱'} rules={[{ validator: emailValidator }]} /> */}
    <Form.Item name="email" label={'邮箱'} rules={[{ validator: emailValidator }]}>
     {/* 自定义的 trim 组件 获取不到表单的值 */}
      <TrimText />
    </Form.Item>
</ProFormList>

{/* ProFormList 里面需要用 ProForm.Item 而不是 Form.Item */}
<ProFormList name="phones" min={0} max={10} initialValue={[{}]} copyIconProps={false}>
      {/* <ProFormText name="phone" label={'电话'} rules={[{ validator: telValidator }]} /> */}
      <ProForm.Item name="phone" label={'电话'} rules={[{ validator: telValidator }]}>
        <TrimText />
      </ProForm.Item>
</ProFormList>

感谢，这太重要了，文档里竟然没写