运营小姐姐必备，轻松搭建表单，效率提升百分百

2023-05-01 03:41:32

手把手教你用 Formily 搭建在线表单

身为运营小能手，创建和管理表单是家常便饭，无论是收集客户信息、做市场调查，还是开展活动报名，表单都是必不可少的。但如果你不是技术咖，搭建表单可能让你头疼不已。别担心，这篇教程将带你一步步用 Formily 轻松搞定表单，即使你是新手也能上手。

什么是 Formily？

Formily 是一个基于 React 的表单库，它提供了丰富的表单控件和配置选项，帮你快速搭建出满足业务需求的个性化表单。它的特点包括：

易于使用： Formily 采用声明式语法，只需配置就能定义表单结构和行为，不用写复杂代码。
功能强大： 提供了丰富的表单控件和配置选项，满足各种表单需求，包括文本框、下拉列表、单选框、复选框、日期选择器等等。
高度可定制： 你可以自定义表单样式和行为，满足品牌和业务需求。

如何用 Formily 搭建表单？

1. 安装 Formily

npm install formily

2. 创建一个 Formily 项目

npx create-formily-app my-app

3. 编写表单代码

import { createForm } from 'formily';

const form = createForm({
  fields: [
    {
      name: 'name',
      title: '姓名',
      type: 'string',
      required: true,
    },
    {
      name: 'email',
      title: '邮箱',
      type: 'email',
      required: true,
    },
    {
      name: 'phone',
      title: '电话',
      type: 'string',
      pattern: /^1[3456789]\d{9}$/,
    },
  ],
});

4. 渲染表单

import React from 'react';
import { FormProvider, Field } from 'formily';

const App = () => {
  return (
    <FormProvider form={form}>
      <div>
        <Field name="name" />
        <Field name="email" />
        <Field name="phone" />
        <button type="submit">提交</button>
      </div>
    </FormProvider>
  );
};

export default App;