快速上手 Alibaba Formily2

引入 Formily2

首先，你需要在你的项目中安装 Formily2：

npm install @formily/react

然后，在你的 React 组件中导入 Formily2：

import { FormProvider, Form } from '@formily/react';

创建 Formily2 表单

接下来，你可以使用 Formily2 的 FormProvider 组件来创建一个表单容器。FormProvider 组件将为其子组件提供 Formily2 的上下文，以便它们能够访问表单状态和方法。

const MyForm = () => {
  return (
    <FormProvider>
      <Form>
        {/* 表单字段 */}
      </Form>
    </FormProvider>
  );
};

添加表单字段

在 Formily2 中，表单字段是通过 Field 组件来创建的。Field 组件接受一个 schema 属性，用于定义字段的属性和行为。

<Field name="name" title="姓名" required />

在上面的示例中，我们创建了一个名为 name 的文本输入字段。title 属性用于设置字段的标题，required 属性表示该字段是必填的。

表单验证

Formily2 提供了强大的表单验证功能。你可以通过设置 Field 组件的 rules 属性来定义字段的验证规则。

<Field name="name" title="姓名" rules={[{ required: true, message: '请输入姓名' }]} />

在上面的示例中，我们为 name 字段添加了一个 required 规则，并指定了相应的错误消息。

表单提交

当用户提交表单时，你可以使用 Form 组件的 onFinish 属性来处理表单提交事件。

<Form onFinish={values => {
  // 处理提交数据
}}>
  {/* 表单字段 */}
</Form>

在上面的示例中，当用户提交表单时，onFinish 事件处理函数将被调用，并传递表单提交的数据。你可以使用这些数据来进行后续操作，例如发送网络请求或保存数据到数据库。

总结

本篇文章只是快速介绍了 Formily2 的基本用法。Formily2 还提供了许多其他高级功能，例如表单联动、数据校验、错误处理等等。你可以通过查阅 Formily2 的官方文档来了解更多详细信息。