Блог

У меня есть форма ant design на React.

1. Как я могу получить весь список полей формы? (все они обернуты Form.Item)?
2. Когда я отправляю форму, есть ли какой-либо способ узнать, какие поля изменены (затронуты) и их значение?

 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-форма (импортируйте все необходимые компоненты) и функция отправки. Вы можете легко получить доступ ко всем вашим полям, как показано на рисунке. Здесь значениями будет js-объект, содержащий пару ключ-значение, или вы можете использовать form.GetFieldValue(‘name’) для доступа к значениям формы.