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实际上是图像网址。

从代码中可以看出，我尝试在onClick={this.selectPhoto}函数看起来像这样时添加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>
))

使用材质的GridList选择正确的项目

1 个答案: