Réinitialiser une entrée de fichier en React

par


Réinitialisation d’un fichier en React #

Pour réinitialiser une entrée de fichier dans React, définissez la valeur de l’entrée à null dans votre
handleChange fonction, par exemple event.target.value = null. La définition de l’élément
value de l’élément null réinitialise l’entrée du fichier.

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

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

    
    event.target.value = null;

    
    console.log(event.target.files);

    
    console.log(fileObj);
    console.log(fileObj.name);
  };


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

export default App;

réinitialiser l'entrée du fichier

Le site target propriété sur le event est une référence à l’entrée du fichier
du fichier.

Nous pouvons réinitialiser la valeur de l’entrée du fichier en lui donnant la valeur suivante null.

Notez que nous avons stocké l’objet fichier dans une variable, de sorte que nous y avons accès même après la réinitialisation de la valeur de l’entrée fichier.

Alternativement, vous pouvez assigner un ref à l’entrée du fichier, ce qui vous permettrait de réinitialiser sa valeur de n’importe où.
de réinitialiser sa valeur de n’importe où.

import {useRef} from 'react';

const App = () => {
  
  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 = () => {
    
    inputRef.current.value = null;
  };

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

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

export default App;

Le site useRef() Le crochet peut être
peut recevoir une valeur initiale comme argument. Le hook retourne un objet ref mutable
dont .current est initialisée à l’argument passé.

Remarquez que nous devons accéder à la propriété current de l’objet ref pour accéder à l’élément d’entrée du fichier sur lequel nous avons défini l’attribut ref prop.

Lorsque l’on passe une ref prop à un élément, par ex. <input ref={myRef} />React définit
l’adresse .current de l’objet ref au noeud DOM correspondant.

Maintenant, chaque fois que le bouton est cliqué, la valeur de l’entrée du fichier est réinitialisée.

Notez que vous êtes en mesure de réinitialiser la valeur de l’entrée du fichier de n’importe où maintenant, parce que nous avons accès au champ de saisie de n’importe où via la référence.

Le site current propriété sur le inputRef fait référence à l’entrée du fichier.



Source link

Laisser un commentaire