在 React 中单击提交按钮时如何重置表单

Question

I am working on a React project, For designing I am using Ant design framework. I have a form in that form when I entered all details in Input form and when I click submit button the Form has to be Reset, I tried to Reset a form after clicking submit button. but it is showing this kind of error. TypeError: Cannot read property 'reset' of null

So please help me to resolve this error

This is my code App.js

import React, { useRef, 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 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()
};
const myForm = useRef(null)
    const resetForm = () => {
        myForm.current.reset();
        }
  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"}} ref={myForm}>
      <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), resetForm()} className="submit" type="primary" >Submit</Button>
      </Form>
    </div>
  </Card>
</div>
</div>
  )
}

export default App
```

Answer 1

As said here you just have a syntax trouble.

Try this instead:

const myForm = useRef(null)
const resetForm = () => {
    myForm.reset();
}