React通用解决方案——表单容器

1. 前话

提问：ToB中台类系统的后端开发主要做啥？

🙋‍♂️：CRUD

再次提问：那前端开发呢？

🙋‍♂️：增删查改

开个玩笑哈啊哈哈哈😂😂😂

虽然没有具体数据统计，但作者仍主观地认为中台类的系统的前端内容至少一半都是增删查改🌚🌚🌚，其对应的前端页面类型就是列表页面和表单页面。

对于列表页面的通用实现，如果读者有看过《React通用解决方案——组件数据请求》一文应该会根据自身实际业务场景得出较好的解决方案，提升实际业务的列表页面的开发效率。

而对于表单页面，又该如何实现以作为通用开发模版进行提效？大致有两种：

• 一种「配置表单」，也就是定义表单DSL，通过JSON配置生成表单页面，这也是业界低代码平台的表单实现。优点是显而易见的，配置简单，快速实现。缺点是灵活性受限于DSL的完整性，对于特殊场景需进行表单组件底层实现的定制化。
• 另一种是「原生表单」，也就是直接使用表单组件。其优缺陷大致与「配置表单」相反。

本篇由于主题定义就不讲解表单的通用实现只分享表单的通用呈现哈🧎‍♂️🧎‍♂️🧎‍♂️下面开始正文。

2. 正文

常见的表单的呈现有两种模式，分别是页面和浮层。

首先是「页面表单」，也就是以页面的形式呈现表单。示例代码如下：

const FormPage: React.FC = () => {
  const [form] = useForm();

  const handleSubmit = useCallback((value) => {
    // TODO 表单提交逻辑
    console.log(value);
  }, []);

  return (
    <div className="test-page">
      <h2>新建用户</h2>
      <Form form={form} onSubmit={handleSubmit} layout="inline">
        <Form.Item
          field="name"
          label="名称"
          rules={[
            {
              required: true,
              message: "请输入名称",
            },
          ]}
        >
          <Input placeholder="请输入" />
        </Form.Item>
        <Form.Item>
          <Button htmlType="submit">提交</Button>
        </Form.Item>
      </Form>
    </div>
  );
}; 

浏览器展现如下：

某一天，产品为了优化交互体验改成「以弹窗呈现表单」，这时便会用到表单的另一种呈现——「浮层表单」。在原「页面表单」的实现中进行修改，修改后的示例代码如下：

const FormPage: React.FC = () => {
  const [form] = useForm();

  const visible = useBoolean(false);

  const handleSubmit = useCallback(() => {
    form.validate((error, value) => {
      if (error) {
        return;
      }
      // TODO 表单提交逻辑
      console.log(value);

      visible.setFalse();
    });
  }, []);

  return (
    <div className="test-page">
      <h2>新建用户</h2>
      <Button onClick={visible.setTrue}>点击新建</Button>

      <Modal
        visible={visible.state}
        title="新建用户"
        okText="提交"
        onOk={handleSubmit}
        onCancel={visible.setFalse}
      >
        <Form form={form} layout="inline">
          <Form.Item
            field="name"
            label="名称"
            rules={[
              {
                required: true,
                message: "请输入名称",
              },
            ]}
          >
            <Input placeholder="请输入" />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}; 

浏览器展现如下：