Question

我正在将图像上传到服务器。如果存在并被替换，则React会刷新页面，但状态会丢失。如何停止这种行为？

节点：

let form = new formidable.IncomingForm();
form.parse(req, function (err, fields, files) {
    let {size, path, name, type} = files.image,
        newpath = pathLib.join(__dirname, '../client/public/uploads') + name;
    fs.rename(path, newpath, function (err) {
        if(err) throw err;
    });
});

反应：

<form id="uploadForm">
    <input id="uploadInput" name="image" type="file" />
</form>
<span onClick={() => {
    let form = document.querySelector("#uploadForm"),
        formData = new FormData(form);
    if(form.querySelector("#uploadInput").files.length)
        uploadFiles(formData, (res) => { 
            console.log(res.data.errors);
        }); 
}}>Save</span>

重要补充！即使没有与React组件交互，页面也刷新了。通过Windows文件管理器替换图像称为重新渲染。

Answer 1

提交表单时只需调用event.preventDefault（）即可。参见此处的示例：

<form  id="formSubmit"}>
    <input id="uploadInput" name="image" type="file" />
   <button type="submit"></button>
</form>

document.getElementById('formSubmit').addEventListener('submit',function(event){
  event.preventDefault()
  // write here your others code
})

替换图像后，React重新加载页面

1 个答案: