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

Question

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

[查看此处的表单图像][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

Answer 1

这是" form "的属性。当你点击提交按钮时，它会刷新整个页面，删除你不需要的表单，并删除type="submit"也可以从提交按钮，并调用handlessubmit;功能但按钮，像这样:

<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>