提交后重置 React bootstrap 的表单

Question

我在提交后重置 Form 时遇到问题。我试着做类似的事情 document.getElementById("formularz").reset()，但它不起作用，在 handleOnSubmit 的末尾做也没有用：event.target.title=""。它确实重置了字段，但是当我开始写入新数据时，突然在每个输入中显示了之前提交的数据。

我的组件：

import {Form, Button} from 'react-bootstrap'
import {useState, useRef} from "react"
import {AiOutlineWarning} from 'react-icons/ai'
function BooksForm(props) {
    const axios = require('axios')
    const [book,setBook] = useState({
        title:  props.title ? props.title : '',
        author:  props.author ? props.author : '',
        genre: props.genre ? props.genre : '',
        release_date: props.release_date ? props.release_date : '',
        description: props.description ? props.description : '',
        image_url: props.image_url ? props.image_url: ''



    })

    const [errorMessage, setErrorMessage] = useState('')

    const { title,
        author,
        genre,
        release_date,
        description,
    image_url,
        rating_count} = book;

    const handleOnSubmit = (event) => {
        event.preventDefault();
        const values = [
            title,
            author,
            genre,
            release_date,
            description,
            image_url
            ];
        let errorMessage = '';

        const allFieldsFilled = values.every((field) => {
            const value = `${field}`.trim();
            return value !== '' && value !== '0' && value !== undefined;
        });

        if (allFieldsFilled) {
            if (new Date(release_date) > new Date()) {
                errorMessage='Data nie może być starsza niż dzisiejsza'
                setErrorMessage(errorMessage)
            }
            else {

                const book = {

                    title,
                    author,
                    genre,
                    release_date,
                    description,
                    image_url

                };
                props.handleOnSubmit(book);

                document.getElementById("formularz").reset()
            }
        } else {
            errorMessage = 'Please fill out all the fields.';
        }
        setErrorMessage(errorMessage);
    };



    const handleInputChange = (e) => {
        const name = e.target.name
        const value = e.target.value
        setBook((prev) => ({...prev, [name]: value}));

    }

    const handleOnEdit = (event) => {
        console.log(book)
        event.preventDefault()
        axios.put('http://localhost:5000/api/book/'+props.id,book)
        props.onEdit()

    }




    return (
        <div className="form">
            {errorMessage && <p className="errorMsg"><AiOutlineWarning />{errorMessage}</p>}



           <Form>
                    <Form.Group controlId="nazwa">
                        <Form.Label>Wprowadź tytuł książki</Form.Label>
                        <Form.Control className="control-input" type="text" name="title" value={title} placeholder="Tu wpisz tytuł" onChange={handleInputChange} />
                    </Form.Group>

                    <Form.Group controlId="autor">
                        <Form.Label>Wprowadź autora książki</Form.Label>
                        <Form.Control className="control-input" type="text" name="author" value={author} placeholder="Tu wpisz autora" onChange={handleInputChange} />
                    </Form.Group>

                    <Form.Group controlId="genre">
                        <Form.Label>Wprowadź gatunek książki</Form.Label>
                        <Form.Control className="control-input" type="text" name="genre" value={genre} placeholder="Tu wpisz gatunek" onChange={handleInputChange} />
                    </Form.Group>

                    <Form.Group controlId="releaseDate">
                        <Form.Label>Wprowadź datę powstania książki</Form.Label>
                        <Form.Control className="control-input" type="date" name="release_date" value={release_date} placeholder="Tu wpisz datę powstania" onChange={handleInputChange} />
                    </Form.Group>

                    <Form.Group controlId="description">
                        <Form.Label>Wprowadź opis książki</Form.Label>
                        <Form.Control className="control-input" type="text" name="description" value={description} placeholder="Tu daj opis" size="30" onChange={handleInputChange} />
                    </Form.Group>

                    <Form.Group controlId="imageurl">
                        <Form.Label>Wprowadź adres URL do zdjęcia książki</Form.Label>
                        <Form.Control className="control-input" type="text" name="image_url" defaultValue={image_url} placeholder="Tu wprowadź adres URL do zdjęcia" size="30" onChange={handleInputChange} />
                    </Form.Group>

                    <Form.Group controlId="rating">
                        <Form.Label>Wprowadź ocenę książki</Form.Label>
                        <Form.Control className="control-input" type="number" name="rating_count" defaultValue={rating_count} placeholder="Tu wprowadź ocenę książki" size="30" onChange={handleInputChange} />
                    </Form.Group>

                    <Button type="submit" variant="primary" className="submitButton">Submit</Button>






                </Form>
            


        </div>
    )



}

export default BooksForm;

Answer 1

是否有任何特定原因您没有调用 setBook() 并且所有字段都为空？

我想，调用 setBook(/* Your object with empty field values */) 应该会重置您的表单。

Answer 2

setBook({
    title: '',
    author: '',
    //rest of properties should look like that
})

您的表单输入由您的状态控制（因为您放置每个输入值以反映同名状态属性）。为了重置您的表单，您需要使用一个新对象设置状态，该对象的结构与您当前的状态相同 - 仅使用空字符串作为值。

提交后重置 React bootstrap 的表单

Reseting react bootstrap's form after the submit

javascript

forms

reactjs

react-bootstrap