字段自定义组件

• github: github.com/easy-page/e…
• 文档站官网：easy-page.github.io/easy-page-d…
• 文档站 github: github.com/easy-page/e…

在表单开发中，我们可能会遇到这样的场景：

• 默认组件库里的组件不能满足自己的诉求，需要扩展组件，但是这个组件通用型又不好，包含过多业务逻辑。 此时就可以直接自定义组件，也可以融入：EasyPage 中，

自定义表单字段

• nodeUtil.createCustomField 创建的自定义组件，会自动被：FormItem 元素包裹。

import { nodeUtil } from '@easy-page/antd-ui';
import { Input } from 'antd';
import React from 'react';

export const name = nodeUtil.createCustomField(
  'name',
  '姓名',
  ({ value, onChange }) => {
    return <Input value={value} placeholder="姓名" onChange={onChange} />;
  },
  {
    value: '',
  }
);

我们通过：nodeUtil.createCustomField api 创建了姓名字段，指定了自己所需的 Input 组件，并可以针对 Input 做更灵活的操作。 这样的一个节点，我们可以直接放入：EasyPage 中，如下效果：

• 见：easy-page.github.io/easy-page-d…

自定义非表单字段

很多时候，我们还想往页面里添加：非表单元素节点，用于：做一些提示交互、做提交按钮等。我们就可以使用：nodeUtil.createCustomNode 创建。

如在上面的案例中的提交按钮，我们是这么做的：

export const submit = nodeUtil.createCustomNode(
  'submit',
  ({ frameworkProps: { getFormUtil } }) => {
    return (
      <Button
        type="primary"
        style={{ marginLeft: 12 }}
        onClick={() => {
          const formUtil = getFormUtil?.();
          console.log('表单值：', formUtil?.getFormData());
        }}
      >
        提交
      </Button>
    );
  },
  {
    value: '',
  }
);

可以发现，我们通过框架提供的：frameworkProps 中的 getFormUtil 就可以提交数据和校验了，是不是很方便呢。

• 小技巧：api 中以：Field 结尾的会被 FormItem 默认包裹，其余不会。
• createCustomNode api 更多信息，请参考 API 文档：nodeUtil.createCustomNode