Блог

Главная - Вопросы по программированию - Реагирует на кнопку JSX с изображением внутри, возвращает значение при нажатии

Реагирует на кнопку JSX с изображением внутри, возвращает значение при нажатии

#reactjs

#reactjs

Вопрос:

Итак, я сопоставляю и отображаю изображения в dom. Изображения должны быть интерактивными, а затем возвращать значение, потому что мне нужно знать, какая кнопка была нажата, чтобы я мог получить значение или идентификатор и выполнить поиск по другому массиву в другом компоненте. Я сделал что-то подобное в vanilla js, добавив идентификатор к изображению, и это сработало, но не будет работать в react. вот мой код, если у кого-нибудь есть решение.

 import {Photo, ViewProps} from "./../tools/Samples.model";

const FocusView = ({photos, visible}:ViewProps):JSX.Element => {

  const imageClick = (e:any):void => {
    console.log("image is clicked"    e.target.value);
  }

  return (
    <div className="focusImages" style={{display: (visible ? 'flex' : 'none')}}>
      {photos.map((data:Photo,n:number):JSX.Element => {
        return (
          <button key={n} style={{background:'none', border:'none'}} onClick={imageClick} value={n}>
            <img src={"./Images/"   data.source} alt="asd" className="imageHover"/>
          </button>
        );
      })}
    </div>
  )
}
  
export default FocusView;

Ответ №1:

Вероятно, вы могли бы использовать currying для решения этой проблемы.

Что-то вроде этого?

 import {Photo, ViewProps} from "./../tools/Samples.model";

const FocusView = ({photos, visible}:ViewProps):JSX.Element => {

const imageClick = (n:number) => (e:any):void => {
  console.log("image is clicked"    n);
}
return (
  
    
<div className="focusImages" style={{display: (visible ? 'flex' : 
'none')}}>
     {photos.map((data:Photo,n:number):JSX.Element =>{
       return (

 <button key={n} style={{background:'none', border:'none'}} 
    onClick={imageClick(n}>
         <img src={"./Images/"   data.source} alt="asd" 
            className="imageHover"/>
 </button>

       );
     })}
    </div>
 
);

Комментарии:

1. вы должны обернуть функцию в обратный вызов таким образом, () => imageClick(n) чтобы она выполнялась только при нажатии

2. Да, теперь он правильно отображается в консоли, спасибо.

3. @Kakiz самое классное в каррировании то, что вам не нужно этого делать. Вы на 100% правы, хотя, если бы мы не ругались.

Ответ №2:

React имеет синтетическое событие. Вы можете попробовать следующий пример, чтобы получить максимальную информацию из события, на которое вы нажали.

 const imageClick = () => {
  console.log("image is clicked"    event.target.value);
}

Ответ №3:

Вы можете передать свой индекс массива (который вы назвали как «n») в качестве параметра для функции imageClick вместо того, чтобы пытаться получить из event.target 

   photos.map((data: Photo, n: number): JSX.Element => {
      return (
         <button onClick={() => imageClick(n)}></button>
      )
  }