React中如何在表单提交时仅清空文件输入预览、保留页面图片正常展示

问题根源 #

你当前仅声明了一个fileImage状态，同时承担了表单内临时选中图片预览和页面已上传图片展示两个用途，提交表单清空该状态时，自然会同步清空页面的展示内容。

实现步骤 #

• 新增savedImage状态，专门存储提交后需要在页面持久展示的图片地址
• 表单内的预览区域继续使用临时的fileImage状态渲染
• 表单提交逻辑中，先把临时预览地址赋值给savedImage，再清空fileImage和文件输入框的选中值
• 页面需要持久展示已上传图片的位置，改为使用savedImage渲染

完整修改代码 #

import { useRef, useState } from 'react';

// 新增savedImage状态存储已提交的图片，新增fileInputRef操作文件输入框
const [fileImage, setFileImage] = useState(null);
const [savedImage, setSavedImage] = useState(null);
const fileInputRef = useRef(null);

const handleImage = (event) => {
  setFileImage(URL.createObjectURL(event.target.files[0]));
}

const handleSubmit = (e) => {
  e.preventDefault();
  // 先把临时预览的图片存到持久展示的状态里
  if (fileImage) {
    setSavedImage(fileImage);
  }
  // 清空表单临时状态和文件输入框
  setFileImage(null);
  if (fileInputRef.current) {
    fileInputRef.current.value = '';
  }
  // 其他提交逻辑...
}

// 页面其他位置持久展示已上传的图片
{savedImage && (
  <div className="saved-image-display">
    <img src={savedImage} alt="已上传图片" />
  </div>
)}

<div className="image-upload">
  <form onSubmit={handleSubmit}>
    <span>Image Upload</span>
    <label className="custom-file-button"> 
      <input
        type="file"
        ref={fileInputRef}
        onChange={handleImage} 
      />
      Upload Image
    </label>
    {/* 表单内仅展示临时选中的预览 */}
    {fileImage && (
      <div className="image-preview">
        <img src={fileImage} alt="预览图" />
      </div>
    )}
    <div className="click-retrieve">
      <button type="submit" className="data-saving">Save</button>
      <button className="closing-window" onClick={toggle}>Close</button>
    </div>
  </form>
</div>

内容的提问来源于stack exchange，提问作者Chandan Ramesh