如何通过属性删除reactjs中的元素?

时间:2019-01-08 16:28:28

标签: reactjs

我想使用已知ID获取未知键属性,以便删除相应的div。

我尝试使用document.getElementById("a").getAttribute('key');,但是它不起作用。可能是我的概念错了。

class PostAdded extends Component {
    constructor(props) {
      super();
      this.deletepost = this.deletepost.bind(this);
    }

    deletepost() {
      let ab =document.getElementById("a").getAttribute('key');
      console.log(ab)
}

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

1 个答案:

答案 0 :(得分:0)

如果您能够删除div,那么无论如何这最终都不会为您工作,因为任何状态更改都将导致重新渲染并且它会再次出现。相反,您可以跟踪处于状态的帖子,然后通过deletepost方法从状态中删除帖子之一。


    class PostAdded extends Component {
        constructor(props) {
          super();
          this.state = {
            posts: props.posts
          }
          this.deletepost = this.deletepost.bind(this);
        }

        deletepost(index) {
          const newPosts = this.state.posts.splice(index)
          this.setState({posts: newPosts})
        }

        render() {
                return (
                  <div>
                  { this.state.posts.map((post, i) =>
                    <div id="a" key={`i-${post.title}`}>
                    <span> <h3>{post.title}</h3><p>{post.post}</p></span>
                    <input type="button" value="Delete" onClick={() => this.deletepost(i)}/>
                    </div>
                  ) }        
                </div>
                )
            }    
    }
    export default PostAdded;