React函数组件中Antdesign表单组件的使用

前言

之前项目，使用到了大量的列表和表单，所以我这边总结了一下使用Antd组件使用Form的方法。希望能对大家有用。

基本使用

一、获取表单

首先在Form标签添加如下属性

   <Form form={ FormRef }></Form>

然后获取表单，这个类似于React的useRef

   const [ FormRef ] = Form.useForm()

这样就可以使用到Form提供给我们的API了

二、获取表单信息 getFieldsValue()

使用表单无非就是要提交用户输入的信息，在这之前我们要先获取到用户输入的表单数据，我们需要getFieldsValue这个API，用上面我们获取到的直接调用就可以了

  let res = FormRef.getFieldsValue()

这里面获取到的值是就是你Form里面每个Form.Item里设置的name属性的值

三、表单验证 validateFields()

有时候在我们提交表单前需要进行表单的输入验证，这时我们可以使用到validateFields这个API，由于是一个Promise所以可以用.then进行验证成功之后的操作，.catch进行异常的捕获

  FormRef.validateFields().then(()=>{
      //成功要进行的操作
  }).catch(() => {
      // 失败捕获
  });

四、数据回显 setFieldsValue()

 FormRef.setFieldsValue(这里传入你要进行回显的值)

五、与其他组件的一些配合使用

Radio与Select，使用Radio与Select默认选项要与Form组件进行受控绑定，可以使用到Form组件的initialValues属性

 <Form initialValues={{ status: 1, appLanguage: 1 }}></Form>
  // Radio默认值绑定status
  <Form.Item label="应用状态" name="status">
    <Radio.Group>
      <Radio value={1}>启用</Radio>
      <Radio value={0}>未启用</Radio>
    </Radio.Group>
  </Form.Item>
 // Select默认值绑定appLanguage
 <Form.Item label="应用语言" name="appLanguage">
    <Select>
          <Option value={0}>Vue</Option>
          <Option value={1}>React</Option>
    </Select>
</Form.Item>