在 React 中发布消息后清除表单

Question

当用户向留言板提交消息时，用户输入在发布后仍然存在。 我可以实现什么语法来在提交时清除输入字段？

import { Card, Container, Form, Button } from "react-bootstrap";
import Label from "react-bootstrap/Card";
import React, { useState } from "react";


export default function MessageForm({handleAddPost}) {
    const [formData, setFormData] = useState({
        photo: '',
        title: '',
        content: ''
    })

    function handleChange(evt) {
        setFormData({...formData, [evt.target.name]: evt.target.value});
    }

    function handleSubmit(e) {
        e.preventDefault();
        handleAddPost(formData);
    }


    return (
        <Container>
            <Card className="text-center" border="success" style={{ width: '85vw' }}>
                <Form size="sm" autoComplete="off" onSubmit={handleSubmit}>
                    <Label>Title</Label>
                    <Form.Control size="sm"
                        value={formData.title} name="title"
                        onChange={e => handleChange(e)}
                        />
                    <Label>Message</Label>
                    <Form.Control size="sm"
                        value={formData.content} name="content"
                        onChange={e => handleChange(e)}
                        />
                    <Button size="sm" variant="success" type="submit">Add Post</Button>
                </Form>
            </Card>
        </Container>
    );
}

Answer 1

你可以做类似的事情

import { Card, Container, Form, Button } from "react-bootstrap";
import Label from "react-bootstrap/Card";
import React, { useState } from "react";

const initialState = {
   photo: '',
   title: '',
   content: ''
};

export default function MessageForm({handleAddPost}) {
    const [formData, setFormData] = useState(initialState);

    function handleChange(evt) {
        setFormData({...formData, [evt.target.name]: evt.target.value});
    }

    async function handleSubmit(e) {
        e.preventDefault();
        await handleAddPost(formData);
        setFormData(initialState);
    }


    return (
        <Container>
            <Card className="text-center" border="success" style={{ width: '85vw' }}>
                <Form size="sm" autoComplete="off" onSubmit={handleSubmit}>
                    <Label>Title</Label>
                    <Form.Control size="sm"
                        value={formData.title} name="title"
                        onChange={e => handleChange(e)}
                        />
                    <Label>Message</Label>
                    <Form.Control size="sm"
                        value={formData.content} name="content"
                        onChange={e => handleChange(e)}
                        />
                    <Button size="sm" variant="success" type="submit">Add Post</Button>
                </Form>
            </Card>
        </Container>
    );
}

Answer 2

在最后添加 handleSubmit

setFormData({
        photo: '',
        title: '',
        content: ''
    });