点击Add Course后如何清空React表单输入？已尝试方案无效

你的问题根源有两个：

1. 输入框是非受控组件：没有把输入框的value绑定到state对应字段，所以即使修改state，输入框内容也不会同步更新
2. 清空state的时机不对：之前直接在handleForm末尾调用，没考虑axios请求的异步特性，且应该在数据成功提交后再清空

修改步骤： #

1. 将输入框改为受控组件，绑定value属性

给每个Input添加value属性，绑定到course对应的字段，同时处理初始为空的情况（避免undefined报错）：

// Course Id输入框
<Input type="text" placeholder="Enter CourseId Here" name="userId" id="userId"
  value={course.id || ""}
  onChange={(e) => {
    setCourse({ ...course, id: e.target.value });
  }} />

// Course Title输入框
<Input type="text" placeholder="Enter Title Here" name="title" id="title"
  value={course.title || ""}
  onChange={(e) => {
    setCourse({ ...course, title: e.target.value });
  }} />

// Course Description输入框
<Input type="textarea" placeholder="Enter description Here" name="description" id="description" style={{ height: 150 }}
  value={course.description || ""}
  onChange={(e) => {
    setCourse({ ...course, description: e.target.value });
  }} />

2. 在请求成功后清空state

把清空表单的逻辑放到axios请求成功的回调中，确保只有数据成功提交到服务器后才清空：

const postDataToServer = (data) => {
  axios.post(`${base_url}/api/v1/courses`, data).then(
    (response) => {
      console.log(response.data);
      toast.success("Courses has been added.", {
        position: "bottom-center"
      })
      // 成功提交后清空表单
      setCourse({id:"", title:"", description:""})
    },
    (error) => {
      console.log(error);
      toast.error("Something went wrong.", {
        position: "bottom-center"
      })
    }
  );
}

修改后的完整代码： #

import React, { Fragment } from "react";
import { Button, Container, Form, FormGroup, Input } from "reactstrap";
import { useEffect, useState } from "react";
import axios from "axios";
import base_url from "../api/bootapi";
import { ToastContainer, toast } from 'react-toastify';

const AddCourse = () => {
    useEffect(() => {
        document.title = "Add Course"
    }, []);

    const [course, setCourse] = useState({});

    const handleForm = (e) => {
        console.log(course);
        postDataToServer(course);
        e.preventDefault();
    }

    const postDataToServer = (data) => {
        axios.post(`${base_url}/api/v1/courses`, data).then(
            (response) => {
                console.log(response.data);
                toast.success("Courses has been added.", {
                    position: "bottom-center"
                })
                // 成功提交后清空表单
                setCourse({id:"", title:"", description:""})
            },
            (error) => {
                console.log(error);
                toast.error("Something went wrong.", {
                    position: "bottom-center"
                })
            }
        );
    }
    return (
        <Fragment>
            <h1 className="text-center my-3">Fill Course Detail</h1>
            <Form onSubmit={handleForm}>
                <FormGroup>
                    <label for="userId">Course Id</label>
                    <Input type="text" placeholder="Enter CourseId Here" name="userId" id="userId"
                        value={course.id || ""}
                        onChange={(e) => {
                            setCourse({ ...course, id: e.target.value });
                        }} />
                </FormGroup>

                <FormGroup>
                    <label for="title">Course Title</label>
                    <Input type="text" placeholder="Enter Title Here" name="title" id="title"
                        value={course.title || ""}
                        onChange={(e) => {
                            setCourse({ ...course, title: e.target.value });
                        }} />
                </FormGroup>

                <FormGroup>
                    <label for="description">Course Description</label>
                    <Input type="textarea" placeholder="Enter description Here" name="description" id="description" style={{ height: 150 }}
                        value={course.description || ""}
                        onChange={(e) => {
                            setCourse({ ...course, description: e.target.value });
                        }} />
                </FormGroup>

                <Container className="text-center">
                    <Button type="submit" color="success">Add Course</Button>
                    <Button type="reset" color="warning" style={{ marginLeft: '8px' }}>Clear</Button>
                </Container>
            </Form>
        </Fragment>
    )
}

export default AddCourse;

这样修改后，点击Add Course按钮，数据成功提交到服务器后，输入框就会自动清空了。

内容的提问来源于stack exchange，提问作者bix_007