class TileImages extends React.Component { render() { return ( <div className="layout"> <img src={airConditioning} key="air conditioning" alt="air conditioning" />, <img src={avacado} key="avacado" alt="avacado" />, <img src={airplane} key="airplane" alt="airplane" />, <img src={clothes} key="new clothes" alt="new clothes" /> </div> ) } } Entonces, si quiero agregar un detector de eventos "onClick" a cada etiqueta <img> , ¿cómo podría hacerlo? ¿Sería mejor usar javascript normal? Además, ¿es mejor crear componentes React separados para cada <img> ya que cada uno tiene sus propias propiedades y debe comportarse de acuerdo con las otras imágenes?
Soy relativamente nuevo en React y un aficionado al desarrollo web, así que tengan paciencia si mi código y mis preguntas no tienen sentido...
Por cierto, aquí está el archivo de código completo si alguien tiene algún consejo.
import React from 'react' //images import airConditioning from './images/tiles_0.png' import avacado from './images/tiles_1.png' import airplane from './images/tiles_2.png' import clothes from './images/tiles_3.png' //CSS styling import './Images.css' // const imagesArray = [ // <img src={airConditioning} key="air conditioning" alt="air conditioning" />, // <img src={avacado} key="avacado" alt="avacado" />, // <img src={airplane} key="airplane" alt="airplane" />, // <img src={clothes} key="new clothes" alt="new clothes" /> // ] export class HomePage extends React.Component { render() { return ( <div> <h1>Lifestyle</h1> <br /> <TileImages /> </div> ) } } class TileImages extends React.Component { render() { return ( <div className="layout"> <img src={airConditioning} key="air conditioning" alt="air conditioning" />, <img src={avacado} key="avacado" alt="avacado" />, <img src={airplane} key="airplane" alt="airplane" />, <img src={clothes} key="new clothes" alt="new clothes" /> </div> ) } } //add classes to react to onClick the image tiles using "react --patterns--"Si su acción es la misma para todos, puede hacer algo como esto, agregando una función predeterminada a onClick
const imageProps = [ { src: airConditioning, key: "air conditioning", alt: "air conditioning"}, { src: avacado, key: "avacado", alt: "avacado"}, { src: airplane, key: "airplane", alt: "airplane"}, { src: clothes, key: "new clothes", alt: "new clothes"} ] const onAction = (ev) => { // do something } const InteractiveImage = (props) => <img onClick={onAction} {...props} /> const TileImages = () => <div className="layout"> {imageProps.map((inputProps) => <InteractiveImage {...inputProps} />)} </div>Si prefiere mantener el mismo formato de escritura, puede mantener la sintaxis, pero aún así configurar la función onclick como predeterminada hasta que se pase una al componente, que anulará:
const TileImages = () => <div className="layout"> <InteractiveImage src={airConditioning} key="air conditioning" alt="air conditioning" />, <InteractiveImage src={avacado} key="avacado" alt="avacado" />, <InteractiveImage src={airplane} key="airplane" alt="airplane" />, <InteractiveImage src={clothes} key="new clothes" alt="new clothes" /> </div>Agregue las imágenes a la matriz, itere a través de la matriz y para cada elemento puede devolver una imagen con la función de clic, eso es si desea una solución dinámica
Si no le importa, simplemente agregue un clic manualmente a cada imagen