es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

imagen onclick en React

31 Jul, 2023 Programación

Estoy tratando de agregar una función onClick cada vez que el usuario presiona la imagen.
He intentado algunas opciones que encontré aquí en stack overflow.
ninguna de las opciones anteriores funciona para mí.
Comparto algunas opciones que no funcionaron:

import React from "react";

export default function Movie(props) {

const imageClick = () => {
    console.log('¡¡¡¡¡Clic!!!!');
  }
    return <img alt="movieposter" src="{props.link}" classname="d-flex justify-content-start m-3" id="movie" onclick="{()" ==""> imageClick}/>
  }

import React from "react";

export default function Movie(props) {

imageClick = () => {
    console.log('¡¡¡¡¡Clic!!!!');
  }
    return <img alt="movieposter" src="{props.link}" classname="d-flex justify-content-start m-3" id="movie" onclick="{this.imageClick}/">
  }

import React from "react";

export default function Movie(props) {

imageClick = () => {
    console.log('¡¡¡¡¡Clic!!!!');
  }

render () 
    {
    return (
    <img alt="movieposter" src="{props.link}" classname="d-flex justify-content-start m-3" id="movie" onclick="{this.imageClick}/">
    )
  }
}
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para agregar una función onClick cada vez que el usuario presiona la imagen, debes definir la función dentro del componente y pasarla como una propiedad a la imagen. Aquí tienes un ejemplo:

    import React from "react";

export default function Movie(props) {
  const handleImageClick = () => {
    console.log('¡¡¡¡Click!!!!');
  };

  return (
    <img alt="movieposter" src="{props.link}" classname="d-flex justify-content-start m-3" id="movie" onclick="{handleImageClick}">
  );
}

    En este ejemplo, definimos la función handleImageClick dentro del componente Movie y la pasamos como una propiedad al elemento img. Cada vez que el usuario haga clic en la imagen, se llamará a la función handleImageClick y se mostrará el mensaje '¡¡¡¡Click!!!!' en la consola.

Comments are closed.