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

【问题标题】：Generated unique value to set the key and then pass the same value into the onClick event生成唯一值来设置键，然后将相同的值传递给 onClick 事件
【发布时间】：2024-05-03 06:25:04
【问题描述】：

我正在做一个 React 项目。我的组件中有一个 div。我使用uuid.v4() 函数（生成随机数）给这个 div 一个键。现在，当我单击此 div 时，我想将此键作为参数发送给单击事件。当它们属于同一组件时，我无法解决如何将密钥发送到单击事件。我正在尝试这样做

<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>

点击事件函数：

onGoogleImageSelect(e){
        console.log(e.target.key)
    }

这给了我错误：

Uncaught TypeError: Cannot read property 'target' of undefined

如何将该键发送到点击事件？

【问题讨论】：

因为你没有传递事件对象，所以使用这个：onClick={(e) => {this.onGoogleImageSelect(e)}}。
现在在控制台中打印“未定义”

标签： javascript reactjs events event-handling dom-events

【解决方案1】：

试试下面的，你需要把参数传给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>

【讨论】：

现在在控制台中打印“未定义”
控制台日志“e”并检查您的属性是否存在。

【解决方案2】：

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

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

然后在你的函数中接受那个参数。

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

官方文档参考https://reactjs.org/docs/handling-events.html#passing-arguments-to-event-handlers

【讨论】：

现在在控制台中打印“未定义”
我觉得e.target.key不是一个东西，改成e.target.value onGoogleImageSelect(e){ console.log(e.target.value) }
那我怎么拿到钥匙？
uuid.v4() 每次使用时都会生成一个随机数。因此，在您的回答中，键和传递的值会有所不同。
但这不是你的问题。那是一个单独的问题。这就是将值传递给事件处理程序的方式。

【解决方案3】：

您可以在 map 函数中使用 ind 索引，而不是使用动态生成的 uuid。

{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)
}

ind 值会随着每个项目递增，因此每次都是唯一的。

最好设置一个 id 属性以供将来参考，而不是使用 key 属性。

{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>
       )
     }

【讨论】：