Ant设计表单问题

Question

I am trying to build a table that is editable using ant design. going through exactly by documentation of ant design, there occurs an error.
Form.useForm() is not a function

This is my code:

import React, { Component } from "react"
import { Table, Input, Button, Form } from "antd"

const EditableContext = React.createContext()

const EditableRow = ({ index, ...props }) => {
  const [form] = Form.useForm()
  return (
    <Form form={form} component={false}>
      <EditableContext.Provider value={form}>
        <tr {...props} />
      </EditableContext.Provider>
    </Form>
  )
}

...

what I guess the problem is arising here: const [form] = Form.useForm()

What might be the solution?
NB my ant design version is '^3.26.12'

Answer 1

You are using AntD v3 and using the docs for v4. You should use the docs for v3 for this: https://3x.ant.design/docs/react/introduce

This is where you find info about the form: https://3x.ant.design/components/form/

https://ant.design/components/form/v3 - for migrating from v3 to v4 (if you want to use Form.useForm)

Answer 2

Try updating you AntD version to v4.x or use documentation for AntD v3.x . AntD v4.x uses const [form] = Form.useForm() whereas AntD v3.x uses Form.create({ name: 'form-name' }) to create form. This is where you have to change.

Answer 3

upgrade v3 to v4, and v4 form is beautiful