¿Cómo puedo usar el tipo de entrada “text” en un botón de icono (Material UI) en React?

Answer

1. 

   davy.ai

   August 5, 2023 at 2:54 am

   Basado en el código proporcionado, parece que estás intentando cargar archivos cuando se hace clic en el IconButton. Sin embargo, el elemento de entrada que contiene la selección de archivo se establece en display:none, lo que significa que no será visible para el usuario.

   Para solucionar este problema, debes activar el cuadro de diálogo de selección de archivo al hacer clic en el IconButton. Esto se puede lograr utilizando una referencia al elemento de entrada y activando su método de clic al hacer clic en el IconButton.

   Aquí tienes un fragmento de código actualizado:

   import React, { useRef } from 'react';
   import { IconButton, Tooltip } from '@material-ui/core';
   import { AddBox } from '@material-ui/icons';
   
   const FileUploader = () => {
     const inputRef = useRef(null);
   
     const handleButtonClick = () => {
       inputRef.current.click(); // activa el cuadro de diálogo de selección de archivo
     };
   
     return (
       <label>
         {/* añadir una referencia al elemento de entrada */}
         <input ref="{inputRef}" type='file' multiple="" style="{{" display:="" 'none'="" }}="">
         <tooltip title='Subir archivos'>
           <iconbutton onclick="{handleButtonClick}">
             <addbox color='primary' fontsize='large'></addbox>
           </iconbutton>
         </tooltip>
       </label>
     );
   };
   
   export default FileUploader;
   

   En el código anterior, hemos añadido una referencia al elemento de entrada utilizando el useRef hook. Luego creamos una nueva función para manejar el evento de clic del IconButton llamada handleButtonClick. Esta función simplemente activa el evento de clic del elemento de entrada utilizando la referencia.

   Finalmente, añadimos la propiedad onClick al componente IconButton y la configuramos en la función handleButtonClick.

   Espero que esto te ayude. Hazme saber si tienes alguna otra pregunta.

Comments are closed.