如何在提交时清除表单中的预览图像，但在 React 中将其显示在网页中没有任何问题？

Posted 2023-02-18

【中文标题】如何在提交时清除表单中的预览图像，但在 React 中将其显示在网页中没有任何问题？

【英文标题】：How to clear the preview image in form on submit but display it in the web page without any problem in React?

【发布时间】：2021-12-01 16:40:03

【问题描述】：

我能够在提交表单时重置输入文件图像，但它也已在网页中清除。我只需要在提交时清除图像并在页面中显示图像。

[在此处查看表单图像][1] [我想在网页上显示这样的图像][2]

这是我的代码：

const [fileImage, setfileImage] = useState(null);
const handleImage = (event) => 
        setfileImage(URL.createObjectURL(event.target.files[0]));
    
 <div className="image-upload">
                       <form onSubmit=handleSubmit>
                                <span>Image Upload</span>
                                <label className="custom-file-button"> <input
                                    type="file"
                                    onChange=handleImage />
                                    Upload Image
                                </label>
                                fileImage && (<div className="image-preview">
                                    <img src=fileImage />
                                </div>)
                            </div>
                            <div className="click-retrieve">
                                <button type="submit" className="data-saving">Save</button>
                                <button className="closing-window" onClick=toggle>Close</button>
                            </div>
                      <form>


  [1]: https://i.stack.imgur.com/ivcIe.png
  [2]: https://i.stack.imgur.com/DqbID.png

【参考方案1】：

它是“表单”的属性，当您单击提交按钮时，它会刷新整个页面，删除您不需要的表单，并从提交按钮中删除 type="submit" 以及通过按钮调用“handleSubmit”函数，如下所示：

<div className="image-upload">
              
                            <span>Image Upload</span>
                            <label className="custom-file-button"> <input
                                type="file"
                                onChange=handleImage />
                                Upload Image
                            </label>
                            fileImage && (<div className="image-preview">
                                <img src=fileImage />
                            </div>)
                        </div>
                        <div className="click-retrieve">
                            <button  onClick=handleSubmit className="data-saving">Save</button>
                            <button className="closing-window" onClick=toggle>Close</button>
                        </div>