Мне нужен идентификатор изображения при нажатии кнопки удаления

** мне нужен идентификатор конкретного изображения в Onclick в reactjs. у нас есть массив со всеми данными об изображениях, т.е. images []. Как передать идентификатор этого конкретного изображения, чтобы удалить его в функцию deleteimage. любые предложения или советы будут приветствоваться **

class Image extends Component {
  constructor() {
    super();
    this.state = { images: [] };
  }


  componentDidMount() {
    let result = apiGateway.getImages();
    if (result != null) {
      result.then((value) => {
        this.setState({ images: value.data.data });
      });
    }
  }

   deleteImage=()=>{

    let result = apiGateway.removeImage(??);
  }



renderImage(value,index){
  let str = value.imagePath.split('/').pop();
  let string = str.slice(0,-5);
  return(
    <div key = {index}>
     <p>Title: {value.title}</p>
     <p>Description: {value.description}</p>
    <button onClick = {this.deleteImage}>DELETE</button>
    <button>UPDATE</button>
    <img className='image' src= {'http://localhost:3000/'+ string } width='100' height='100' alt='nature'/>
    <br/><br/>
    </div>
    );
}


  render() {

    return(  
                 <div>
                      <div>{
                        this.state.images.map((image,index)=>{

                          return this.renderImage(image,index);
                        })
                      }
                      </div>
                </div>
    );
  }

}

export default Image;
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
562
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Попробуйте отправить value в функцию deleteImage(value):

<button onClick = {this.deleteImage.bind(this, value)}>DELETE</button>

ИЛИ ЖЕ

<button onClick = {(e) => this.deleteImage(value, e)}>DELETE</button>

Пожалуйста, просмотрите больше здесь

Другие вопросы по теме