一、 Form.useForm()的使用

之前使用表单的时候，一直在为表单赋值纠结，找了一些资料，也感觉很复杂，使用多了之后，感觉表单赋值也挺简单的。

1、 创建一个form

const [theForm] = Form.useForm();

2、 绑定表单组件

无论是ProForm、ModalForm、还是DrawerForm，都可以绑定我们的theForm，使用属性form={theForm}绑定，代码如下

<ProForm
          form={theForm}
          style={{ marginTop: 8, maxWidth: 600 }}
          name="新建信息"
          layout="vertical"
          onInit={() => {
            theForm.resetFields();
          }}
          onFinish={async (value) => {
            const success = await onFinish(value as API.ContractItem);
            if (success) {
              theForm.resetFields();
              history.goBack();
            }
          }}
        >
</ProForm>

注意：绑定theForm之后，初始化的时候一定要注意清空老数据，否则数据就会一直保存在theForm中，导致页面显示错乱。

这里我习惯在onInit方法里面，调用重置方法

theForm.resetFields();

这样每次加载都会是最新数据。

3、 表单取值和赋值

表单取值方法：

theForm.getFieldValue('name');

其中name就是各表单控件的name。

表单赋值方法：

theForm.setFieldValue('name',1);

第一个参数就是各表单控件的name，第二个参数就是要赋的值，

如果要清空控件的值，可以赋值为null。

只需要在适当的时候，使用theForm赋值即可。

二、 表单控件间的联动

之前有记录过ProFormSelect可以直接设置dependencies属性来进行联动，参见Ant Design Pro学习记录—ModalForm的使用（二）而其他组件是没有这个功能的，这时候需要用到ProDormDependency组件

<ProFormDependency name={['room_id']}>
            {({ room_id }) => {
              theForm.setFieldValue('lease_area', null);
              if (room_id > 0) {
                roomData?.map((item) => {
                  console.log(item);
                  if (room_id == item.id) {
                    theForm.setFieldValue('lease_area', item?.building_area);
                  }
                });
              }
              return (
                <ProFormText
                  name="lease_area"
                  label="租赁面积(m²)"
                  width="xl"
                  placeholder="选择房源后显示"
                  initialValue={0}
                  rules={[
                    {
                      required: true,
                      message: '请输入租赁面积',
                    },
                    {
                      pattern: /^\d{1,7}(\.\d{1,2})?$/,
                      message: '面积最大不能超过9999999.99',
                    },
                  ]}
                  fieldProps={{ autoComplete: 'off' }}
                />
              );
            }}
          </ProFormDependency>

其中，属性name对应的是关联的控件的name值，可以有多个，表示只要name里面关联的任意一个控件的值发生了变化，都会触发此组件的运行，我们可以在这里进行一些数据的判断、计算，给任意组件赋值，甚至控制组件的显示和隐藏，另外ProDormDependency是可以嵌套多层的，如果表单结构比较复杂，多个组件互相关联变化，都可以使用ProDormDependency实现。