使用 material 的 GridList 选择正确的项目

Question

我有一个与 Material-UI 一起工作的 react-mobx 代码，看起来像这样：

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 时更改所选照片。 key(tile)其实是一张图片url.

如代码所示，当 selectPhoto 函数如下所示时，我尝试添加 onClick={this.selectPhoto}：

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

发送到函数的参数 photo 不是我想要的 tile（图像 url）。如何将此参数正确传递给函数？

Answer 1

您可以创建一个内联箭头函数并将您的 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>
))

使用 material 的 GridList 选择正确的项目

Selecting the correct item using material's GridList

javascript

reactjs

material-ui

mobx