将反应映射键发送到动作答案

【问题标题】：send react map key to an action将反应映射键发送到动作
【发布时间】：2021-02-17 19:05:28
【问题描述】：

我在事件侦听器 (onclick) 上发送 react map 键属性值时遇到问题。

我有PostId 处于状态，所以我想将键值发送到另一个组件，并且通过这篇文章id 可以访问总帖子数据。

在div className="__content" 中我调用函数来获取event.target.key 但我返回undefined。

     <div className="chat__posts" > 
                        {
                                
                         this.props.postsinfo.map(c=> {

                            return(
                                <div  className="__content" key={c.PostID} value="sdfghj" onClick={this.previewRedirect}  >
                                    <div className="post__user_image"> 
                                      <img src={`data:image/jpeg;base64,${c.UserImageString}`} alt="" />   
                                    </div>
                                
                                    <div className="post__user_comment" >
                                    <div  > {c.UserName} </div>
                                        tap to view - 
                                        <TimeAgo date={new Date(this.convertInt(c.PostTime))}  />
                                    </div>
                                </div>
                            )
                        
                        } )          
                        }
                     </div>

【问题讨论】：

有什么理由不将其指定为id=...？然后访问它event.target.id?

标签： reactjs dictionary

【解决方案1】：

我的理解是您想访问被点击的div 的帖子 ID。有几种方法可以做到，但我会这样做：

    this.props.postsinfo.map(c=> {

      return(
          <div  className="__content" key={c.PostID} onClick={() => this.previewRedirect(c.PostID)}  >
              <div className="post__user_image"> 
                <img src={`data:image/jpeg;base64,${c.UserImageString}`} alt="" />   
              </div>
          
              <div className="post__user_comment" >
              <div  > {c.UserName} </div>
                  tap to view - 
                  <TimeAgo date={new Date(this.convertInt(c.PostTime))}  />
              </div>
          </div>
      )
})

注意onClick={() => this.previewRedirect(c.PostID)}

你的previewRedirect 函数会得到这样的结果：

previewRedirect(postID){
  console.log(postID)
}

【讨论】：