Question

我试图通过一个按钮来调用ShowPost类中的deletePost（index）方法，该按钮在React的render（）步骤中动态呈现。可以调用说“单击我”的按钮，它将打印我的数组this.state.posts的第一个（aka [0]位置），而说“删除”的按钮已经动态创建破坏代码。它给我TypeError：无法读取未定义的属性'deletePost'。我认为我需要以某种方式将deletePost方法“传递”到动态呈现的“内部”组件（也称为按钮）中？

class ShowPost extends Component {

  constructor(props) {
      super(props);
      this.state = {
        posts: []
      };
      this.setState = this.setState.bind(this);
      this.deletePost = this.deletePost.bind(this);
    }

  deletePost(index){
    console.log(this.state.posts[index]);
  }

  render(){
    return (
      <React.Fragment>
        <button onClick={this.deletePost.bind(this, 0)} > click me </button>
          <div className="list-group">
          {
            this.state.posts.reverse().map(function(post,index) {
              return <div key={index} className="list-group-item active">
              <h4 className="list-group-item-heading">{post.Title}</h4>
              <p className="list-group-item-text">{post.Subject}</p>
              <button onClick={this.deletePost.bind(this, 0)} > Delete </button>
              </div>
            })
          }
          </div>
      </React.Fragment>
    )
  }
}

export default ShowPost;

Answer 1

由于渲染按钮具有功能，因此无法获得this。更改为箭头功能。

this.state.posts.reverse().map(post => (
          return <div key={post.Id} className="list-group-item active">
          <h4 className="list-group-item-heading">{post.Title}</h4>
          <p className="list-group-item-text">{post.Subject}</p>
          <button onClick={this.deletePost.bind(this, 0)} > Delete </button>
          </div>
        ))

另一件事是您应该使用post.id作为键而不是索引。

ReactJS试图从动态呈现的按钮调用类方法

1 个答案: