生成的唯一值以设置密钥，然后将相同的值传递到OnClick事件中

Question

我正在从事一个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

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

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

Answer 2

您需要将值传递到OnClick Handler中的函数调用

<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-passing-arguments-to-cent Handlers

Answer 3

而不是使用动态生成的UUID，您只能在地图函数中使用ind索引。

{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属性以供将来参考而不是使用关键属性。

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