获取 Ant 设计表单的字段列表答案

【问题标题】：Get list of Fields of an Ant Design Form获取 Ant 设计表单的字段列表
【发布时间】：2021-03-16 14:33:33
【问题描述】：

我在 React 上有一个 ant design 表单。

如何获取表单的字段的完整列表？（都被Form.Item包裹了）？
当我提交表单时，有什么方法可以找出哪些字段被更改（触摸）及其值？

【问题讨论】：

标签： javascript reactjs antd ant-design-pro

【解决方案1】：

import React from 'react'

function TempForm({ form }) {
    const submit = e => {
        e.preventDefault()
        form.validateFields((error, values) => {
            if (error) {
              console.log('error while validating')
            } else if (values) {
               console.log('name: ', values.name, 'email: ', values.email)
             }
        })
     }
return (
<Form onSubmit={submit}>
  <div>
      <Form.Item label="Customer">
        {form.getFieldDecorator('name', {
          initialValue: 'John',
          rules: [{ required: true, message: 'Please select a customer!' }],
        })(<Input type="text" placeholder="name" />)}
      </Form.Item>
      <Form.Item label="Customer Email">
        {form.getFieldDecorator('email', {
          rules: [{ required: true, message: 'Please select a Clinic' }],
        })(<Input type="email" placeholder="customer email" />)}
      </Form.Item>
    </div>
</Form>
 )
 }

export default Form.create()(TempForm)

这里我们有一个 antd-form（导入所有必要的组件）和一个 on-submit 函数。如图所示，您可以轻松访问所有字段。这里的值将是一个包含键值对的 js 对象，或者您可以使用 form.getFieldValue('name') 来访问表单值。

【讨论】：

谢谢，有什么方法可以只获取键和值的触摸字段对吗？ @devSpartan
假设用户在输入框中输入内容并删除它而不保存，那么我认为您应该为每个字段使用检查变量，如果输入字段有任何更改，该变量将设置为 true。或者您可以检查最终值的长度是否为 0 或大于 0
好的，谢谢。没有直接的函数来获取字段