React表单系列之Formily

教程

发布日期: 2021-10-11

在使用React进行开发的时候，如果是简单的表单还好。如果遇到复杂的表单，比如分好几个步骤的表单，联动效果的字段，多层结构的字段等等，就需要一个好的框架的支持了。下面介绍一下阿里旗下的开源组件：Formily

React表单组件

Formily官网：https://v2.formilyjs.org/
Formily GH：https://github.com/alibaba/formily/blob/formily_next/README.zh-cn.md

React表单系列

创建React项目并安装依赖

bash

npx create-react-app formily-demo
cd formily-demo
yarn add @formily/core @formily/react antd moment @formily/antd
yarn start

尝试添加一个官网的例子。

首先增加文件src/components/Form1.js:

javascript

import React from 'react'
import { createForm } from '@formily/core'
import { FormProvider, FormConsumer, Field } from '@formily/react'
import {
  FormItem,
  FormLayout,
  Input,
  FormButtonGroup,
  Submit,
} from '@formily/antd'

const form = createForm()

export default function Form1() {
    return (
        <FormProvider form={form}>
            <FormLayout layout="vertical">
                <Field
                name="input"
                title="Input box"
                required
                initialValue="Hello world"
                decorator={[FormItem]}
                component={[Input]}
                />
            </FormLayout>
            <FormConsumer>
                {() => (
                <div
                    style={{
                    marginBottom: 20,
                    padding: 5,
                    border: '1px dashed #666',
                    }}
                >
                    Real-time response：{form.values.input}
                </div>
                )}
            </FormConsumer>
            <FormButtonGroup>
                <Submit onSubmit={console.log}>submit</Submit>
            </FormButtonGroup>
        </FormProvider>
    )
}