如何重置 ReactJS 文件输入

在 ReactJS 中，有时需要重置一个文件输入框的值，以便用户能够上传不同的文件。

以下是一个简单的方法来实现这一点：

import React, { useRef } from "react";

function ResetFileInput() {
  const fileInputRef = useRef(null);

  const handleReset = (event) => {
    event.preventDefault();
    fileInputRef.current.value = null;
  };

  return (
    <form>
      <label>
        Upload file:
        <input type="file" ref={fileInputRef} />
      </label>
      <button onClick={handleReset}>Reset</button>
    </form>
  );
}

export default ResetFileInput;

解释

在上面的代码中，我们首先使用 useRef hook 创建了 fileInputRef 变量。这个变量将会被直接传递给文件输入框的 ref 属性，以便在重置时访问该元素。

接下来，我们定义了一个 handleReset() 函数，它接收了一个事件对象，并阻止了默认的提交行为。

然后我们通过将 value 属性设置为 null 来重置文件输入框的值，从而使其变为空。

最后，我们将 handleReset() 函数绑定到一个按钮的 onClick 事件上，在用户点击该按钮时触发。

这样一来，用户就能够重置文件输入框的值并上传不同的文件了。