表单在提交reactjs时重新加载答案

【问题标题】：Form get reloaded on submit reactjs表单在提交reactjs时重新加载
【发布时间】：2021-07-01 08:28:45
【问题描述】：

当我提交表单时，它会重新加载，但是当没有选择文件时，它不会重新加载，只显示一条错误消息“未上传文件”。只有在我提交文件时才会重新加载。

我已经使用了 e.preventDefault() 来防止重新加载，但它不起作用。

组件代码

import React, { Fragment, useState } from 'react'
import axios from 'axios'

const FileUpload = () => {
    const [file, setFile] = useState('');
    const [filename, setFilename] = useState('Choose File')
    const [uploadedFile, setUploadedFile] = useState({})

    const onChange = (e) => {
        setFile(e.target.files[0]);
        setFilename(e.target.files[0].name);
    }

    const onSubmit = async (e) => {
        e.preventDefault();
        const formData = new FormData();
        formData.append('file', file);

        try {
            const res = await axios.post('/upload', formData, {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            })

            const { fileName, filePath } = res.data;

            setUploadedFile({ fileName, filePath });
            console.log(uploadedFile);
        } catch (err) {
            if (err.response.status === 500) {
                console.log("There was a problem with the server.");
            } else {
                console.log(err.response.data.msg);
            }
        }
    }

    return (
        <Fragment>
            <form onSubmit={onSubmit}>
                <div className="mb-3">
                    <label htmlFor="formFile" className="form-label">{filename}</label>
                    <input className="form-control" type="file" id="formFile" onChange={onChange} />
                </div>
                {/* <button type="submit" value="Upload" className="btn btn-primary w-100" /> */}
                <button className="btn btn-primary w-100" type="submit">Upload</button>
            </form>
        </Fragment>
    )
}

export default FileUpload

任何人都可以帮我解决这个问题。

【问题讨论】：

您的问题是您的表单没有action 属性，即action="/link_to_some_page"。这会使表单返回其默认行为，即将数据发送到其当前 URL，这就是您遇到此行为的原因。您要么需要指定表单数据的发送位置，要么通过将e.preventDefault()propagation 应用于表单的提交来防止默认行为。或者，您可以利用 AJAX 并异步发送数据。
我已经将e.preventDefault() 应用于提交事件，并使用 axios 将数据发布到我的 API URL

标签： reactjs forms

【解决方案1】：

这段代码的问题在于异步事件处理程序， preventDefault需要同步调用才有没有任何影响。

你应该在e.preventDefault()之前调用e.persist()

【讨论】：

我照你说的做了，但它仍然在提交时重新加载 e.persist(); e.preventDefault();常量 formData = new FormData(); formData.append('file', 文件);
@RishiPurwar 你能把它上传到 condesandbox 或类似的东西，这样调试起来会更容易。

【解决方案2】：

不要使用提交按钮和表单onSubmit 您可以只使用普通按钮并将提交处理程序绑定到onClick

<form>
                <div className="mb-3">
                    <label htmlFor="formFile" className="form-label">{filename}</label>
                    <input className="form-control" type="file" id="formFile" onChange={onChange} />
                </div>
                {/* <button type="button" onClick={onSubmit} value="Upload" className="btn btn-primary w-100" /> */}
                <button className="btn btn-primary w-100" type="submit">Upload</button>
            </form>

【讨论】：

现在，我这样做了，但仍然会重新加载
您从表单元素中删除了 onSubmit 对吗？
是的，我从表单中删除了 onSubmit 事件