Antd Procomponent 之 proForm - 高级表单

本文作者系360奇舞团前端开发工程师

ProForm 在原来的 Form 基础上增加一些语法糖和更多的布局设置，帮助我们快速的开发一个表单。同时添加一些默认行为，让我们的表单默认好用。分步表单，Modal 表单，Drawer 表单，查询表单，轻量筛选等多种 layout 可以覆盖大部分的使用场景，脱离复杂而且繁琐的表单布局工作，更少的代码完成更多的功能。

ProForm 高级表单

• 使用 initialValues设置默认值。

• 可以使用 ProFormDependency 实现表单联动或者做一些依赖。

• ProForm 的 onFinish 是个 Promise。

• 使用 onValuesChange 监听某个值。

• 如果要使用自定义的组件可以用 Form.Item 包裹后使用，支持与 antd 的 Form混用。

// 设置整体默认值
<ProForm initialValues={obj} />

// 设置单个控件的
<ProForm onValuesChange={(changeValues) => console.log(changeValues)}>
  <ProFormText initialValue="prop"/>
</ProForm>

// 相互依赖的组件联动
<ProForm>
  <ProFormDependency name={['name']}>
  {({ name }) => {
    return (
      <ProFormSelect
        options={[
          {
            value: 'chapter',
            label: '盖章后生效',
          },
        ]}
        width="md"
        name="useMode"
        label={`与《${name}》合同约定生效方式`}
      />
    )
  }}
</ProFormDependency>
</ProForm>


// 使用自定义组件
<ProForm>
  <Form.Item name="switch" label="Switch" valuePropName&#