Zugriff auf `this.state` innerhalb der Event-Handler-Funktion nicht möglich: ReactJS

Question

So erhalten Sie React component state in dieser Komponentenfunktion. Dies hat keine Objekte mit Status verknüpft. Ich bekomme diesen.Status undefined in Board removeComment Funktion. Grundsätzlich in Board removeComment Funktion möchte ich Kommentare Element auf diesem Index (als Argument übergeben).

class Board extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      comments:[ 
      "One", 
      "Two", 
      "Three", 
      "four", 
      "five" 
     ]}; 
    }; 
    removeComment(index) { 
     console.log('i was called',this.state); 
    } 
    render() { 
     console.log(this.state); 
     return (
      <div className="board"> 
       { 
        this.state.comments.map((text,i) => { 
         return (
          <Comment key ={i} index = {i} commentText={text} removeComment={this.removeComment}/> 
         ) 
        }) 
       } 
      </div> 
     ); 
    } 
} 

class Comment extends React.Component { 
    removeComment() { 
    var index = this.props.index; 
    this.props.removeComment(index); 
    } 
    render() { 
    return(
     <div onClick={this.removeComment.bind(this)}>{this.props.commentText}</div> 
    ); 
    } 
} 

Answer 1

Weil Sie vergessen haben, die Methode removeComment in Board Komponente zu binden, verwenden Sie die folgende Zeile:

removeComment={this.removeComment.bind(this)} 

Verwenden Sie diese in Board Komponente:

<div className="board"> 
    { 
     this.state.comments.map((text,i) => { 
      return (
       <Comment key ={i} index = {i} commentText={text} removeComment={this.removeComment.bind(this)}/> 
      ) 
     }) 
    } 
</div>