0
362
VisualizaçõesEl evento onChange dentro del ciclo solo pasa el índice 0
El siguiente código es un componente de entrada que carga una imagen y estoy usando una función "handleImageChange" para activar el evento onChange. esta dentro de un bucle
{images.map((x,i) => ( <Grid item> <Input accept="image/*" id="change-image-file" required type="file" onChange={(e) => handleImageChange(e, i)} /> </Grid> )} const handleImageChange = (e, index) =>{ conole.log(index) // whichever index I click it always returns 0 conole.log(e.target.files[0]) // however e.target.value works alright } 
Estoy usando React 18, Material UI 5, y la "Entrada" y la "Cuadrícula" son de material UI que se parece a HTML "entrada" y "div" respectivamente.
2 Respostas
Responde à pergunta0
mueve tu <Grid> fuera del mapa y luego intenta
<Grid item> {images.map((x,i) => ( <Input accept="image/*" id="change-image-file" required type="file" onChange={(e) => handleImageChange(e, i)} /> )} </Grid>0
Como sugiere Aman , primero mueva su cuadrícula fuera del bucle. Lo segundo que debe cambiar es que debe proporcionar una clave dinámica y una identificación para cada elemento, de esta manera declara la misma identificación para cada elemento y ninguna clave: el principio básico de React se basa en las claves cuando se trabaja con un bucle que genera instancias de componentes.
Deberías intentar algo como esto:
<Grid item> {images.map((x,i) => ( <Input key={`k-${i}`} id={`i-${i}`} accept="image/*" required type="file" onChange={(e) => handleImageChange(e, i)} /> )}