React中如何取消图片加载/上传并将文件输入框重置为空？

你当前的代码只更新了imageUrl状态为null，但文件输入框本身的选中文件状态并没有被清空，所以需要同时操作DOM来重置输入框的状态，具体实现如下：

解决步骤 #

• 使用useRef获取文件输入框的DOM引用，方便直接修改其属性
• 在取消函数中，除了重置imageUrl，还要将输入框的value设为空字符串（这是重置文件输入框的标准方式）
• 修正label的htmlFor属性与input的id不匹配的问题（原代码中label的htmlFor是"Image du produit"，input的id是"uploadImage"，会导致label点击失效）

修改后的完整代码 #

import { useState, useRef } from 'react';

function YourComponent() {
  const [imageUrl, setImageUrl] = useState(null);
  const fileInputRef = useRef(null);

  const uploadImage = (e) => {
    const file = e.target.files[0];
    setImageUrl(file);
  };

  const cancelImage = () => {
    setImageUrl(null);
    // 重置文件输入框的选中状态
    if (fileInputRef.current) {
      fileInputRef.current.value = '';
    }
  };

  return (
    <label htmlFor="uploadImage">
      Image du produit:
      <input 
        id="uploadImage" 
        type="file" 
        onChange={uploadImage} 
        ref={fileInputRef}
      />
      <button onClick={cancelImage}>X</button>
    </label>
  );
}

export default YourComponent;

原理说明 #

文件输入框的value属性直接控制着它的选中文件状态，将其设置为空字符串会触发输入框重置，彻底清除已选中的文件记录；同时更新imageUrl状态，让组件的状态和DOM保持一致，回到初始的空状态。

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