0
279
Views¿Cómo puedo usar input type='text' en un botón de icono (interfaz de usuario de material) en React?
Primero, mira mi código.
Vuelvo a escribir mi código para que quede claro. ¡Así que no hay necesidad de preocuparse por las cosas de importación!
const test = () => { return ( <label > <input type='file' multiple style={{ display: 'none' }} /> <Tooltip title='Upload Files'> <IconButton> <AddBox color='primary' fontSize='large'/> </IconButton> </Tooltip> </label> ) }Aquí, con este código, intento abrir input type="text" cuando hago clic en IconButton.
Pero parece que no hay cambios.
Intenté algunas formas diferentes, sin embargo, no funcionó bien :/
FYI, aquí está la imagen del botón AddBox que quiero usar en nombre del tipo de entrada = 'texto'.
No soy bueno en inglés, ¡así que por favor sean comprensivos!
¡¡Tengo muchas ganas de saber de ti!!
1 answers
Answer question0
Prueba esto
const Test = () => { return ( <label htmlFor='file'> <input id='file' type='file' multiple style={{ position: 'fixed', top: '-100em' }} onChange={e => console.log(e.target.files)} /> <Tooltip title='Upload Files'> <IconButton component='span'> <RiAddBoxFill color='primary' fontSize='large' /> </IconButton> </Tooltip> </label> ); };Creé este código basado en el ejemplo de Material UI ( https://mui.com/components/buttons/#upload-button ) y ya lo probé
Notas:
- el atributo
htmlForen lalabely laideninputse usa para conectar ambos elementos para hacer que la etiqueta active el clic de entrada si el valor coincide. Vea esto: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for (en js simple usamosforpero en react usamoshtmlForprobablemente porque la palabra claveforestá reservada para javascriptfor loop) -
IconButtonnecesita accesorioscomponent='span'(no estoy seguro de esto, por defecto usa el botón pero cuando lo intenté no pudo activar el clic de entrada, probablemente porque el elemento del botón bloquea el elemento de la etiqueta) - EDITAR: en Safari, la entrada se deshabilita cuando se oculta con pantalla: ninguna. Un mejor enfoque sería usar position: fixed; arriba: -100em. Fuente: https://stackoverflow.com/a/28075416/10661914
EDITAR: para obtener los archivos, use onChange en el elemento de entrada, el código ya se actualizó