Javascript 生成唯一值以设置键，然后将相同的值传递给onClick事件

我正在做一个项目。我的组件中有一个div。我使用

uuid.v4（）

函数为这个div提供一个键（生成随机数）。现在，当我单击这个div时，我想将这个键作为参数发送给click event。我无法解决当它们属于同一组件时如何将密钥发送到单击事件。我正试着这样做

<div className="img-scroll">
                        {this.state.imageSearchResults.items.map((item, ind) => {
                            return <div className="person-image"
                                        key={uuid.v4()}
                                        onClick={()=>{this.onGoogleImageSelect()}}
                                        style={{backgroundImage:`url(${item.link})`}}>
                            </div>
                        })}
                    </div>

这给了我一个错误：

---

如何将该键发送到click事件？

尝试以下操作，您需要将参数传递给onGoogleImageSelect

<div className="img-scroll">
                        {this.state.imageSearchResults.items.map((item, ind) => {
                            return <div className="person-image"
                                        key={uuid.v4()}
                                        onClick={(e)=>{this.onGoogleImageSelect(e)}}
                                        style={{backgroundImage:`url(${item.link})`}}>
                            </div>
                        })}
                    </div>

{this.state.imageSearchResults.items.map（（item，ind）=>{
返回{this.onGoogleImageSelect（e）}
style={{backgroundImage:`url（${item.link}）`}>
})}

您需要将值传递到onClick处理程序中的函数调用中

<div className="person-image"
     key={uuid.v4()}
     onClick={()=> this.onGoogleImageSelect(uuid.v4())}
     style={{backgroundImage:`url(${item.link})`}}>
</div>

---

官方文档引用

而不是使用动态生成的uuid，您只需在map函数中使用

ind

索引即可

{this.state.imageSearchResults.items.map(
   (item, ind) => <div className="person-image"
                       key={ind}
                       onClick={()=>this.onGoogleImageSelect(ind)}
                       style={{backgroundImage:`url(${item.link})`}}>
                  </div>
   )
 }

ind

值将随每个项目而增加，因此每次都是唯一的

与其使用key属性，不如为将来的引用设置id属性

{this.state.imageSearchResults.items.map(
       (item, ind) => <div className="person-image"
                           key={ind}
                           id={ind}
                           onClick={()=>this.onGoogleImageSelect(ind)}
                           style={{backgroundImage:`url(${item.link})`}}>
                      </div>
       )
     }

{this.state.imageSearchResults.items.map(
（item，ind）=>this.onGoogleImageSelect（ind）}
style={{backgroundImage:`url（${item.link}）`}>
)
}

因为您没有传递事件对象，所以请使用以下命令：

onClick={（e）=>{this.onGoogleImageSelect（e）}}

。现在在控制台中打印“undefined”onClick现在在控制台中打印“undefined”onClick控制台日志“e”onClick现在检查您的属性是否存在。现在在控制台中打印“undefined”onClick我不认为e.target.key是一件事，将其更改为e.target.value

onGoogleImageSelect（e）{console.log（e.target.value）}

然后如何获取密钥？uuid.v4（）每次使用时都会生成一个随机数。因此，在您的答案中，键和传递的值将不同。但这不是您的问题。这是另一个问题。这是将值传递到事件处理程序的方式。

onGoogleImageSelect(uid){
   console.log(uid)
 }

{this.state.imageSearchResults.items.map(
   (item, ind) => <div className="person-image"
                       key={ind}
                       onClick={()=>this.onGoogleImageSelect(ind)}
                       style={{backgroundImage:`url(${item.link})`}}>
                  </div>
   )
 }

onGoogleImageSelect(value){
     console.log(value)
}

{this.state.imageSearchResults.items.map(
       (item, ind) => <div className="person-image"
                           key={ind}
                           id={ind}
                           onClick={()=>this.onGoogleImageSelect(ind)}
                           style={{backgroundImage:`url(${item.link})`}}>
                      </div>
       )
     }