获取 Ant Design 表单的字段列表

Question

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

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

Answer 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') 来访问表单值。

获取 Ant Design 表单的字段列表

Get list of Fields of an Ant Design Form

javascript

reactjs

antd

ant-design-pro