提交后重置反应引导程序的表单

问题描述

我在提交后重置 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,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,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;

解决方法

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

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

,

是否有任何特定原因您没有在所有字段都为空的情况下调用 setBook()？

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