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

Question

我正在做一个 React 项目，为了设计，我使用了 Ant 设计框架。 当我在输入表单中输入所有详细信息时，我在该表单中有一个表单，当我单击提交按钮时，表单必须重置，我尝试在单击提交按钮后重置表单。 但它显示了这种错误。 类型错误：无法读取 null 的属性“重置”

所以请帮我解决这个错误

这是我的代码 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

正如这里所说，你只是有一个语法问题。

试试这个：

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