React + Ant Design 4.X版本表单Form数据回显、清除、获取某一值、获取整个表单的值

使用步骤：

1. 给From表单添加ref属性，假设这里设置的ref=“addForm”
2. 在满足条件的时候，通过下列方法做不同的事
   ①数据回显（设置值）
   this.refs.addForm.setFieldsValue({name: ‘json’}) // 给一个对象，属性名为表单中的某一项
   ②清空数据
   this.refs.addFrom.resetFields()
   ③获取某一表单项的值
   this.refs.addFrom.getFieldValue(‘name’)
   ④获取多项的值
   this.refs.addFrom.getFieldsValue([‘name’, ‘age’]) // 给一个数组
   ⑤获取整个表单的值
   this.refs.addFrom.getFieldsValue() // 不传参数

// Form表单
<Form
            layout='vertical'
            ref='addForm'
            onFinish={this.onFinish}
          >
            <Form.Item
              name='name'
              label='名字'
              rules={[
                {
                  required: true,
                  validator: (rule, value, callback) => this.handleName(rule, value, callback),
                  validateTrigger: ['onBlur', 'onChange']
                }
              ]}
            >
              <Input placeholder='请输入名字' allowClear />
            </Form.Item>
            <Form.Item
              name='age'
              label='年龄'
              rules={[
                {
                  required: true,
                  validator: (rule, value, callback) => this.handleAge(rule, value, callback),
                  validateTrigger: ['onBlur', 'onChange']
                }
              ]}
            >
              <Input placeholder='请输入年龄' allowClear />
            </Form.Item>
            <Form.Item>
              <Button type='primary' htmlType='submit'>保存</Button>
            </Form.Item>
          </Form>

// 我是需要在编辑的时候数据回显，所以选择在componentDidMount周期函数处理
componentDidMount () {
    this.setState({
      id: this.props.match.params.id
    })
    // 通过路由获取到的id来区分新增与编辑，有id为编辑
    // 编辑的时候回显数据
    if (this.props.match.params.id) {
    // dataSource为数组对象结构
      const data = this.state.dataSource.find(item => {
        return item.key === Number(this.props.match.params.id)
      })
      // 手动设置Form表单的值
      this.refs.addForm.setFieldsValue(data)
    }
  }