如何在 React 中重置文件输入

React 1月前 50

要在 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;

如何在 React 中重置文件输入

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

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

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

使用 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;