迹忆客 专注技术分享

要在 React 中重置文件输入，请在 handleChange 函数中将输入的值设置为 null，例如 event.target.value = null。

将元素的值属性设置为 null 会重置文件输入。

const App = () => {
  const handleFileChange = event => {
    const fileObj = event.target.files && event.target.files[0];
    if (!fileObj) {
      return;
    }

    console.log('fileObj is', fileObj);

    // 👇️ reset file input
    event.target.value = null;

    // 👇️ is now empty
    console.log(event.target.files);

    // 👇️ can still access file object here
    console.log(fileObj);
    console.log(fileObj.name);
  };


  return (
    <div>
      <input type="file" onChange={handleFileChange} />
    </div>
  );
};

export default App;

事件对象的目标属性是对文件输入字段的引用。

我们可以通过将其设置为空来重置文件输入的值。

请注意 ，我们将文件对象存储在一个变量中，因此即使在文件输入的值被重置后我们也可以访问它。

使用 ref 在单击时重置文件输入

或者，我们可以为文件输入分配一个 ref，这将允许我们从任何地方重置它的值。

import {useRef} from 'react';

const App = () => {
  // 👇️ create a ref for the file input
  const inputRef = useRef(null);

  const handleFileChange = event => {
    const fileObj = event.target.files && event.target.files[0];
    if (!fileObj) {
      return;
    }

    console.log('fileObj is', fileObj);
  };


  const resetFileInput = () => {
    // 👇️ reset input value
    inputRef.current.value = null;
  };

  return (
    <div>
      <input ref={inputRef} type="file" onChange={handleFileChange} />

      <button onClick={resetFileInput}>Reset file input</button>
    </div>
  );
};

export default App;

useRef() 钩子可以传递一个初始值作为参数。 该钩子返回一个可变的 ref 对象，其 .current 属性被初始化为传递的参数。

请注意 ，我们必须访问 ref 对象的当前属性才能访问我们设置 ref 属性的文件输入元素。

当我们将 ref prop 传递给元素时，例如 <input ref={myRef} />，React将ref对象的 .current 属性设置为对应的DOM节点。

现在每次单击按钮时，文件输入的值都会重置。

请注意 ，我们现在可以从任何地方重置文件输入的值，因为我们可以通过 ref 从任何地方访问输入字段。

inputRef 对象的当前属性引用文件输入。