Изменить изображение в <CardMedia>

Question

У меня есть массив изображений.Я хотел бы обновлять изображение в CardMedia каждый раз, когда пользователь нажимает изображение.

Я не могу понять, как получить следующее изображение в массиве (текущий индекс)?

<Grid item xs>
  <Card className={classes.card}>
    <CardHeader
      avatar={
        <Avatar aria-label="Recipe" className={classes.avatar}>
          R
        </Avatar>
      }
      title="Title ....."
      subheader="September 14, 2016"
    />
    <CardMedia
      id="cm"
      className={classes.media}
      image="https://material-ui-next.com/static/images/cards/contemplative-reptile.jpg"
      title="Title"
      onClick={this.onClick}
    />
  </Card>
</Grid>

onClick() {
  console.log("** onClick **");
  //How to update the backgroundImage with the next image in the Array ???
  document.getElementById("cm").style["backgroundImage"] =
    "url('./wind/saxophones.jpg')";
}

constructor(props) {
  super(props);
  this.state = {
    IMAGES: [
      {
        url: "./wind/baritones.jpg"
      },
      {
        url: "./wind/saxophones.jpg"
      },
      {
        url: "./wind/flute-893911__340.jpg"
      }
    ]
  };
}

Спасибо

Answer 1

Начните с imageIndex = 0:

constructor(props) {
  super(props);
  this.state = {
    imageIndex: 0,
    IMAGES: [{
    ...

В CardMedia вам нужно сослаться на текущее выбранное изображение, используя состояние:

<CardMedia
  id='cm'
  className={classes.media}
  image={this.state.IMAGES[this.state.imageIndex]}
  title="Title"
  onClick={this.onClick}
/>

Затем в обработчике onClick:

onClick() {
  // now set the image
  this.setState({imageIndex: this.state.imageIndex + 1})
}

Наконец, вам, вероятно, нужно привязать this к своему обработчику onClick:

onClick={this.onClick.bind(this)}