javascript - 使用 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 时更改所选照片。关键 (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>
))