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

【问题标题】：How to Reset a form When I click submit Button I React using React hooks如何重置表单当我单击提交按钮时，我使用 React 钩子做出反应
【发布时间】：2021-07-14 16:51:34
【问题描述】：

我正在做一个 React 项目。在我的项目中，当我单击提交时输入所有输入字段后，我有一个表单，然后我重置了一个表单。但是当我试图实现这一点时，我遇到了错误像这样的类型错误：

antd_es_form__WEBPACK_IMPORTED_MODULE_8__.default.useForm 不是函数

这是我的代码

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
````

【问题讨论】：

标签： reactjs ant-design-pro

【解决方案1】：

Form 组件应该包装 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

【讨论】：