Выбор правильного элемента с использованием GridList материала - PullRequest
Новая
       10

Выбор правильного элемента с использованием GridList материала

0 голосов
/ 23 июня 2018

У меня есть кодact-mobx, который работает с Material-UI и выглядит примерно так: 

render() {
  // some consts declarations

  return (
    <div>
      <img src={selectedPhoto} alt={'image title'} />
      <GridList className={classes.gridList} cols={2.5}>
        {photos.map(tile => (
          <GridListTile key={tile} onClick={this.selectPhoto}>
            <img src={tile} alt={'image title'} />
            <GridListTileBar
              classes={{
                root: classes.titleBar,
                title: classes.title
              }}
            />
          </GridListTile>
        ))}
      </GridList>
    </div>
  );
}

Показывает список фотографий. Я хотел бы изменить выбранную фотографию, когда пользователь нажимает одну из GridListTile. Ключ (tile) фактически является URL-адресом изображения.

Как видно из кода, я попытался добавить onClick={this.selectPhoto}, когда функция selectPhoto выглядит следующим образом: 

selectPhoto = (photo) => {
  this.props.rootStore.selectPhoto(photo);
}

Аргумент photo, который отправляется в функцию, не является tile (URL-адрес изображения), как я хотел бы иметь. Как я могу передать этот аргумент в функцию правильно?

1 Ответ

0 голосов
/ 24 июня 2018

Вы можете создать встроенную функцию стрелки и передать свои tile на selectPhoto: 

photos.map(tile => (
  <GridListTile key={tile} onClick={() => this.selectPhoto(tile)}>
    <img src={tile} alt={'image title'} />
    <GridListTileBar
      classes={{
        root: classes.titleBar,
        title: classes.title
      }}
    />
  </GridListTile>
))
...