React：重新上传图像和实施文件删除时检测更改的问题

Question

我的 React 应用程序遇到问题，当我删除图像并再次上传时，我的输入（类型文件）中根本未检测到更改。

这是我的代码，其中类型文件的输入被隐藏，我正在使用按钮来显示文件：

import { useState, useRef } from 'react';
import './styles.css';

export const FileUploader = ({ handleFile }) => {
  const [selectedFile, setSelectedFile] = useState(null);
  const hiddenFileInput = useRef(null);
  
  const handleClick = () => {
    hiddenFileInput.current.click();
  };

  const handleRemove = () => {
    setSelectedFile(null);
    handleFile(null);
  };

  const handleChange = event => {
    const fileUploaded = event.target.files[0];
    setSelectedFile(fileUploaded);
    handleFile(fileUploaded);
  };

  return (
    <>
      <button className="button-upload" onClick={handleClick}>
        {selectedFile ? selectedFile.name : "Upload"}
      </button>
      {selectedFile && (
        <button className="button-remove" onClick={handleRemove}>
          Remove
        </button>
      )}
      <input
        type="file"
        onChange={handleChange}
        ref={hiddenFileInput}
        style={{ display: 'none' }} // Make the file input element invisible
      />
    </>
  );
};

Answer 1

我遇到过这个问题，解决方案是通过每次上传新文件时更改其密钥来强制反应显示输入文件。

这是您的代码的新版本：

export const FileUploader = ({ handleFile }) => {
  const [selectedFile, setSelectedFile] = useState(null);
  const [fileVersion, setFileVersion] = useState(0);
  const hiddenFileInput = useRef(null);

  const handleClick = () => {
    hiddenFileInput.current.click();
  };

  const handleRemove = () => {
    setSelectedFile(null);
    handleFile(null);
  };

  const handleChange = event => {
    const fileUploaded = event.target.files[0];
    setSelectedFile(fileUploaded);
    setFileVersion((v) => v + 1)
    handleFile(fileUploaded);
  };

  return (
    <>
      <button className="button-upload" onClick={handleClick}>
        {selectedFile ? selectedFile.name : "Upload"}
      </button>
      {selectedFile && (
        <button className="button-remove" onClick={handleRemove}>
          Remove
        </button>
      )}
      <input
        key={fileVersion}
        type="file"
        onChange={handleChange}
        ref={hiddenFileInput}
        style={{ display: 'none' }} // Make the file input element invisible
      />
    </>
  );
};