javascript - Antd 4.0.0 : How to use form. getFieldValue() 和所有表单的 API 为 `const [form] = Form.useForm` ？

Question

我使用 Ant Design 运行 React 并收到此错误:

Instance created by 'useForm' is not connect to any Form element. Forget to pass 'form' prop?

代码:

// .../services/index.js
export { default as registerService } from './registerService'


// .../services/registerService.js
import axios from '../../../configs/api.service'

const registerService = (form) => {
  return {
    validatePasswordAndConfirmPassword: async (rule, value) => {
      if (value && value !== form.getFieldValue(['user', 'confirmPassword'])) {
        throw new Error('Password and Confirm Password must be same')
      }
    },

    register: async user => {
      const { data } = await axios.post('/users', user)
      const { _id, username } = data
      console.log('Register Success:', `User ${username} is created, You get ID: ${_id}`)
      return data
    },
  }
}

export default registerService

// Register Component
import React from 'react'
import { Button, Form, Input } from 'antd'
import { registerService } from '../../services/'

const Register = () => {
  const [form] = Form.useForm()
  const service = registerService(form)

  const onFinish = async ({ user }) => {
    try {
      await service.register(user)
    } catch (err) {
      console.error('Register Failed:', err.response)
    }
  }

  const onFinishFailed = errorInfo => {
    console.error('Failed:', errorInfo)
  }

  return (
    <>
      <Form {...layout}
            name="Register"
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            validateMessages={validateMessages}
      >
        <Form.Item
          name={['user', 'username']}
          label="Username"
          rules={[
            { required: true },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name={['user', 'password']}
          label="Password"
          rules={[
            { required: true },
            { validator: service.validatePasswordAndConfirmPassword },
          ]}
        >
          <Input.Password />
        </Form.Item>
        <Form.Item
          name={['user', 'confirmPassword']}
          label="Confirm Password"
          rules={[
            { required: true },
            {/*{ validator: service.validatePasswordAndConfirmPassword },*/}
          ]}
        >
          <Input.Password />
        </Form.Item>
        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit">Submit</Button>
        </Form.Item>
      </Form>
    </>
  )
}

export default Register

如何修复这个错误？

Answer 1

好的...我已经修好了

我只是将属性 form={form} 传递到 Form 组件中。如第 4 行

const [form] = Form.useForm()

<Form {...layout}
      form={form}
      name="Register"
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      validateMessages={validateMessages}
>
        <Form.Item
          name={['user', 'username']}
          label="Username"
          rules={[
            { required: true },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name={['user', 'password']}
          label="Password"
          rules={[
            { required: true },
            { validator: service.validatePasswordAndConfirmPassword },
          ]}
        >
          <Input.Password />
        </Form.Item>
        <Form.Item
          name={['user', 'confirmPassword']}
          label="Confirm Password"
          rules={[
            { required: true },
            { validator: service.validatePasswordAndConfirmPassword },
          ]}
        >
          <Input.Password />
        </Form.Item>
        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit">Submit</Button>
        </Form.Item>
</Form>