reactjs - ReactJS中点击按钮时如何获取父div的关键属性

Question

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

我试过了

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

但这在控制台中给了我 null 。

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

我期待“1”，​​但结果为空。提前致谢。

Answer 1

在ReactJS中，“key”供React内部使用，不会包含在DOM中。这可能就是您获得 null 的原因。

您只需添加另一个 Prop /属性即可。 像下面这样的东西应该可以工作。

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

此外，如果输入元素上的“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>
        )
    }    
}