如何重置表单当我单击提交按钮时，我使用 React 钩子做出反应

Question

I am working on a React project. In my project I have a form after entering all input fields when I click the submit then I have reset a form. But when I am trying to achieve this I am getting error like this TypeError:

antd_es_form__WEBPACK_IMPORTED_MODULE_8__.default.useForm is not a function

This is my code

import React, { useState } from "react";
import { Row, Col, Button, Card, Form, Input, Select } from "antd";
import axios from 'axios'
import 'antd/dist/antd.css';
import {
  SearchOutlined,
  StopOutlined,
  UserOutlined,
  LeftOutlined,
  DoubleRightOutlined,
} from "@ant-design/icons";
import './App.css';

const App = () => {
const { Option } = Select;

const [data, setData] = useState({});

  const [form] = Form.useForm();


const testData = async () => {
    try {
        const res = await axios.post('http://localhost:8000/api/user', data);
        console.log(res);
    } catch (error) {
        console.log(error);
    }

}

const handleChange = ({ target }) => {
  const { name, value } = target;
  const newData = Object.assign({}, data, { [name]: value });
  setData(newData);
}

const handleSubmit = (e) => {
  e.preventDefault();
  console.log(data);
  testData()
form.resetFields();
};

  const prefixSelector = (
    <Form.Item name="prefix" noStyle>
      <Select
        style={{
          width: 50,
          // height: 10,
        }}
      >
        <Option value="86">+86</Option>
        <Option value="87">+87</Option>
      </Select>
    </Form.Item>
  );
  return (
    <div>
    <div className="customizedCards">
  <Card className="cardStyle">
    <div className="main-form">
      <h5 className="idDetails">StudentDETAILS</h5>
      <Form style={{marginLeft: "-10px"}} form={form}>
      <Form.Item
    name="name"
    noStyle
    rules={[{ required: true, message: 'firstname is required' }]}
  >
    <Input type="text" name='first_name'  style={{ width: 400 }} onChange={handleChange}  placeholder="Firstname" />
  </Form.Item>
  <Form.Item
    name="name"
    noStyle
    rules={[{ required: true, message: 'lastname is required' }]}
  >
    <Input type="text" name='last_name' style={{ width: 400 }} onChange={handleChange} placeholder="Lastname" />
  </Form.Item>
  <Form.Item
    name="name"
    noStyle
    rules={[{ required: true, message: 'email is required' }]}
  >
    <Input type="email" name='email' style={{ width: 400 }} onChange={handleChange} placeholder="Email" />
  </Form.Item>
  <Form.Item
name="phone"
rules={[
  {
    required: true,
    message: 'Please input your phone number!',
  },
]}
>
<Input type="number" name='phone_number' addonBefore={prefixSelector} style={{ width: 400 }} onChange={handleChange} placeholder="Phone Number"  />
</Form.Item>
<Button  onClick={(e) => handleSubmit(e)} className="submit" type="primary" >Submit</Button>
      </Form>
    </div>
  </Card>
</div>
</div>
  )
}

export default App
````

Answer 1

Form component should wraps Form.Item

     <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
        >
          <Form.Item
            label="Username"
            name="username"
            rules={[{ required: true, message: 'Please input your username!' }]}
          >
         ......
     </Form>

https://ant.design/components/form