In che modo l'uso di ReactRef Hook può aiutarti a reimpostare un campo di input dopo un caricamento riuscito

Usando React, potresti trovare più scomodo reimpostare alcuni campi di input rispetto ad altri. In particolare, gli input di file possono essere problematici, tuttavia questi sono i campi esatti che vorrai reimpostare dopo un caricamento di file riuscito.

Per fortuna, l'hook useRef fornisce una soluzione semplice. Scopri come cancellare un campo di immissione file con l'hook useRef dopo un caricamento riuscito.

Creazione di un modulo di caricamento semplice

Per dimostrare come reimpostare un campo di input di file con useRef, lo farai creare un semplice modulo React con un campo di input che accetta un'immagine.

Innanzitutto, imposta un valore di stato denominato selectedFile utilizzando l'hook useState per tenere traccia del file selezionato. Lo stato iniziale per selectedFile sarà null poiché l'utente non ha ancora selezionato un file.

Inoltre, crea una funzione di gestione denominata handleFileChange che aggiorna lo stato selectedFile quando un utente seleziona un file. Aggiungi una seconda funzione chiamata handleSubmit, che dovrebbe caricare lo stato quando un utente carica il file.

importare { usaStato } da"reagire";
funzioneFileUploadForm() {
cost [selectedFile, setSelectedFile] = useState(nullo);
cost handleFileChange = (evento) => {
 setSelectedFile (event.target.files[0]);
 };
cost handleSubmit = (evento) => {
 evento.preventDefault();
 };
ritorno (
 <>


"fileInput">Scegli un file:</label>
"file" id="fileInput" onChange={handleFileChange} />
"invia">Carica</button>
 </form>
 </>
 );
}

Quando il caricamento del file è completo, l'applicazione dovrebbe cancellare il campo di input, che imparerai come fare di seguito.

Cancella il campo di immissione dopo il caricamento di un file

Se si tratta di un campo di testo, è possibile cancellare l'input impostando lo stato su una stringa vuota:

setSelectedFile("")

Ma questo non funzionerà con un campo di input di tipo file. L'impostazione della variabile di stato selectedField su una stringa vuota rimuove solo i dati del file dallo stato e non dal DOM. Questo perché questo stato non fa riferimento al valore di input.

Per cancellare il valore di input, è necessario creare un riferimento all'input del file utilizzando l'hook useRef. In questo esempio, importa useRef da React e crea un oggetto ref chiamato fileRef:

importare {usaStato, usaRif} da"reagire";
funzioneFileUploadForm() {
// ...
cost fileRef = usaRef()
ritorno (
// ...
 );
}

Quindi fai riferimento al riferimento nel campo di input come mostrato di seguito.

"fileInput">Scegli un file:</label>
 tipo="file"
 id="fileInput"
 onChange={handleFileChange}
 ref={fileRef}
 />
"invia">Carica</button>
</form>

React imposta il attuale proprietà della variabile ref all'elemento DOM, il che significa che puoi ottenere il valore del file in questo modo:

fileRef.valore.corrente

È quindi possibile reimpostare questo valore assegnandogli null.

fileRef.current.value = nullo

Incapsulalo in una funzione chiamata handleReset in questo modo:

cost handleReset = () => {
 fileRef.current.value = nullo;
};

Quindi chiama questa funzione quando carichi correttamente un file per cancellare il campo di input.

Perché dovresti reimpostare i campi di input dopo il caricamento dei file

In genere è buona norma reimpostare il campo di input dopo un caricamento riuscito del file. Questo perché fornisce all'utente una chiara indicazione che il suo caricamento è andato a buon fine e anche offre loro l'opportunità di caricare un altro file senza dover cancellare manualmente l'input campo.