Cómo restablecer una entrada de archivo en React

En este tutorial, vamos a aprender cómo restablecer una entrada de archivo en React usando un ejemplo.

Índice
  1. Restablecer una entrada de archivo en React
  2. Restablecer la entrada del archivo haciendo clic en el botón

Restablecer una entrada de archivo en React

Para restablecer una entrada de archivo en React, podemos configurar event.target.value = null en el objeto de evento del elemento de entrada. Al definir el elemento de entrada target.value propiedad en null restablece la entrada del archivo.

Aquí un ejemplo:

import React from 'react';

const App = () => {

  const handleFileChange = (event) => {
    
    event.target.value = null;
  };

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

export default App;

En el ejemplo anterior, agregamos el event.target.value = null a la función handleChange, por lo que cada vez que se cambia cualquier dato en el elemento de entrada, se restablece el archivo.

Restablecer la entrada del archivo haciendo clic en el botón

Para restablecer una entrada de archivo haciendo clic en el botón:

  1. Accede al objeto dom del elemento de entrada usando el gancho useRef().

  2. Agregue inputRef.current.value=null a la función de controlador de eventos de clic de botón, de modo que cada vez que un usuario haga clic en el botón de reinicio, el archivo de entrada se reinicia.

import {useRef} from 'react';

const App = () => {

  
  const inputRef = useRef(null);

  const resetFileInput = () => {
    
    inputRef.current.value = null;
  };

  return (
    <div>
      <input ref={inputRef} type="file" />
      <button onClick={resetFileInput}>Reset file</button>
    </div>
  );
};

El gancho useRef() devuelve un objeto de referencia mutable del elemento pasado, cuyo .current La propiedad se inicializa con el argumento pasado como initialValue.

Si quieres conocer otros artículos parecidos a Cómo restablecer una entrada de archivo en React puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas