时间戳

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

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

问题描述

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

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

标签： reactjsreact-hooksreact-forms

解决方案

它是“表单”的属性，当您单击提交按钮时，它会刷新整个页面，删除您不需要的表单，并从提交按钮中删除 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>

推荐阅读