在ReactJS中单击按钮时如何获取父div的key属性

我想在单击子按钮时获取父div的键属性。使用我编写的代码，我在控制台中得到null。不明白为什么

我试过了

let a = e.target.parentElement.getAttribute("key");  

但这在控制台中为空

deletepost(e) {
let a = e.target.parentElement.getAttribute("key");  
  console.log(a);
}

render() {
        return (
          <div>
          { this.props.posts.map((post, i) =>
            <div id="a" key="1">
            <span> <h3>{post.title}</h3><p>{post.post}</p></span>
            <input type="button" value="Delete" id="1" onClick={this.deletepost}/>
            </div>
          ) 
        }        
        </div>
        )
    }    
}

deletepost（e）{
设a=e.target.parentElement.getAttribute（“键”）；
控制台日志（a）；
}
render（）{
返回(
{this.props.posts.map（（post，i）=>
{post.title}{post.post}

) 
}        
)
}    
}

---

我期望为“1”，但为空。提前感谢。

您可以尝试使用currentTarget

 let a = e.currentTarget.parentNode.getAttribute("key");

或

---

您可以将“key”属性更改为“data key”，并获得如下属性：

//示例类组件
类测试扩展了React.Component{
建造师（道具）{
超级（道具）；
this.deletepost=this.deletepost.bind（this）；
}
删除邮件（e）{
设a=e.currentTarget.parentNode.getAttribute（“数据键”）；
控制台日志（a）；
}
render（）{
返回(
{this.props.posts.map（（post，i）=>
{post.title}{post.post}

) 
}        
)
}    
}
//渲染它
ReactDOM.render(
,
document.getElementById（“react”）
);

在ReactJS中，“键”供React内部使用，不会包含在DOM中。这可能就是你得到空值的原因

您只需添加另一个道具/属性。
像下面这样的方法应该可以奏效

deletepost(e) {
let a = e.target.parentNode.getAttribute("postid"));
  console.log(a);
}

render() {
    return (
      <div>
          {     
          this.props.posts.map((post, i) =>
            <div id="a" key="1" postId="1">
            <span> <h3>{post.title}</h3><p>{post.post}</p></span>
            <input type="button" value="Delete" id="1" onClick={this.deletepost}/>
            </div>
          ) 
        }        
     </div>
        )
    }    
}

deletepost（e）{
设a=e.target.parentNode.getAttribute（“postid”）；
控制台日志（a）；
}
render（）{
返回(
{     
this.props.posts.map（（post，i）=>
{post.title}{post.post}

) 
}        
)
}    
}

此外，如果输入元素上的“id”与div（父）元素上的“key”相同，则可以简单地执行以下操作：

deletepost(e) {
let a = e.target.id;
  console.log(a);
}

render() {
    return (
      <div>
          {     
          this.props.posts.map((post, i) =>
            <div id="a" key="1">
            <span> <h3>{post.title}</h3><p>{post.post}</p></span>
            <input type="button" value="Delete" id="1" onClick={this.deletepost}/>
            </div>
          ) 
        }        
     </div>
        )
    }    
}

deletepost（e）{
设a=e.target.id；
控制台日志（a）；
}
render（）{
返回(
{     
this.props.posts.map（（post，i）=>
{post.title}{post.post}

) 
}        
)
}    
}
No。仍然为null。实际上，我正在另一个组件中呈现此组件，如下所示：“，并且父组件“posts”的状态在该组件中作为prop传递。在我的场景中，我如何实现您的逻辑？如何调用组件无关紧要，所以您只需将父属性更改为“数据键”并进入“deletepost”函数
deletepost(e) {
let a = e.target.id;
  console.log(a);
}

render() {
    return (
      <div>
          {     
          this.props.posts.map((post, i) =>
            <div id="a" key="1">
            <span> <h3>{post.title}</h3><p>{post.post}</p></span>
            <input type="button" value="Delete" id="1" onClick={this.deletepost}/>
            </div>
          ) 
        }        
     </div>
        )
    }    
}