表单解决方案(Formily)

1. 安装相关依赖

1. npm install --save @formily/core (负责管理表单的状态，表单校验，联动等等)
2. 桥接库
   1) React 用户  
   	 > npm install --save @formily/react
   2) Vue 用户  
   	 > npm install --save @formily/vue
3. 组件库
   1）Ant Design 用户  
   	 > npm install --save antd moment @formily/antd
   2）Alibaba Fusion 用户  
   	 > npm install --save @alifd/next moment @formily/next
4. 导入依赖
   - import React from 'react'
   - import { createForm } from '@formily/core'
   - import { FormProvider, Field } from '@formily/react'
   - import { FormItem, Input } from '@formily/antd'

2. 简单用例

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 () => {
  return (
    <FormProvider form={form}>
      <FormLayout layout="vertical">
        <Field
          name="input"
          title="输入框"
          required
          initialValue="Hello world"
          decorator={[FormItem]}
          component={[Input]}
        />
      </FormLayout>
      <FormConsumer>
        {() => (
          <div
            style={{
              marginBottom: 20,
              padding: 5,
              border: '1px dashed #666',
            }}
          >
            实时响应：{form.values.input}
          </div>
        )}
      </FormConsumer>
      <FormButtonGroup>
        <Submit onSubmit={console.log}>提交</Submit>
      </FormButtonGroup>
    </FormProvider>
  )
}

3. 核心优势

• 高性能
• 开箱即用
• 联动逻辑实现高效
• 跨端能力，逻辑可跨框架，跨终端复用
• 动态渲染能力

4. 官方链接

• 官网地址：https://formilyjs.org/
• Github开源项目地址：https://github.com/alibaba/formily