JIYIK CN >

To reset a file input in React, handleChangeset the input's value to null in the function, event.target.value = nulle.g.

Setting the element's value attribute to null resets the file input.

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;

The target property of the event object is a reference to the file input field.

We can reset the value of the file input by setting it to empty.

请注意, we store the file object in a variable so we can access it even after the value of the file input has been reset.

Use ref to reset the file input when clicked

Alternatively, we can assign a ref to the file input, which will allow us to reset its value from anywhere.

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()The hook can be passed an initial value as an argument. The hook returns a mutable ref object whose .current property is initialized to the passed argument.

请注意, we have to access the current property of the ref object in order to access the file input element on which we set the ref attribute.

When we pass a ref prop to an element, for example <input ref={myRef} />, React sets the ref object’s .current property to the corresponding DOM node.

Now every time you click the button the value of the file input will reset.

请注意, we can now reset the value of the file input from anywhere, since we can access the input field from anywhere via ref.

inputRefThe current property of the object refers to the file input.