Cómo UseRef Hook de React puede ayudarlo a restablecer un campo de entrada después de una carga exitosa

Al usar React, puede que le resulte más incómodo restablecer algunos campos de entrada que otros. En particular, las entradas de archivos pueden ser problemáticas, sin embargo, estos son los campos exactos que querrá restablecer después de cargar un archivo con éxito.

Afortunadamente, el enlace useRef proporciona una solución simple. Aprenda cómo puede borrar un campo de entrada de archivo con el enlace useRef después de una carga exitosa.

Creación de un formulario de carga simple

Para demostrar cómo restablecer un campo de entrada de archivo con useRef, deberá crear un formulario React simple con un campo de entrada que acepta una imagen.

En primer lugar, configure un valor de estado llamado selectedFile usando el gancho useState para rastrear el archivo seleccionado. El estado inicial de selectedFile será nulo ya que el usuario aún no ha seleccionado un archivo.

Además, cree una función de controlador denominada handleFileChange que actualice el estado del archivo seleccionado cuando un usuario seleccione un archivo. Agregue una segunda función llamada handleSubmit, que debe cargar el estado cuando un usuario carga el archivo.

importar { estado de uso } de"reaccionar";
funciónFileUploadForm() {
constante [archivoSeleccionado, establecerArchivoSeleccionado] = usarEstado(nulo);
constante handleFileChange = (evento) => {
 setSelectedFile (event.target.files[0]);
 };
constante manejarEnviar = (evento) => {
 event.preventDefault();
 };
devolver (
 <>


"archivoEntrada">Elija un archivo:</label>
"archivo" identificación ="archivoEntrada" onChange={handleFileChange} />
"entregar">Subir</button>
 </form>
 </>
 );
}

Cuando se complete la carga del archivo, la aplicación debería borrar el campo de entrada, lo cual aprenderá a hacer a continuación.

Borrar el campo de entrada después de cargar un archivo

Si se tratara de un campo de texto, podría borrar la entrada configurando el estado en una cadena vacía:

establecerArchivoSeleccionado("")

Pero esto no funcionará con un campo de entrada de tipo archivo. Establecer la variable de estado de campo seleccionado en una cadena vacía solo elimina los datos del archivo del estado y no del DOM. Esto se debe a que este estado no hace referencia al valor de entrada.

Para borrar el valor de entrada, debe crear una referencia a la entrada del archivo usando el enlace useRef. En este ejemplo, importa useRef desde React y crea un objeto ref llamado fileRef:

importar { estado de uso, referencia de uso } de"reaccionar";
funciónFileUploadForm() {
// ...
constante fileRef = useRef()
devolver (
// ...
 );
}

Luego haga referencia a la referencia en el campo de entrada como se muestra a continuación.

"archivoEntrada">Elija un archivo:</label>
 tipo ="archivo"
 identificación ="archivoEntrada"
 onChange={handleFileChange}
 ref={referencia de archivo}
 />
"entregar">Subir</button>
</form>

React establece el actual propiedad de la variable ref al elemento DOM, lo que significa que puede obtener el valor del archivo de esta manera:

fileRef.current.value

Luego puede restablecer este valor asignándole un valor nulo.

fileRef.current.value = nulo

Encapsule esto en una función llamada handleReset como esta:

constante manejarReset = () => {
 fileRef.current.value = nulo;
};

Luego llame a esta función cuando cargue con éxito un archivo para borrar el campo de entrada.

Por qué debería restablecer los campos de entrada después de cargar archivos

Por lo general, es una buena práctica restablecer el campo de entrada después de cargar un archivo correctamente. Esto se debe a que le da al usuario una indicación clara de que su carga fue exitosa y también les brinda la oportunidad de cargar otro archivo sin tener que borrar manualmente la entrada campo.