2017-04-06 11 views
3

取得方法取得する方法コンポーネントの機能にコンポーネントの状態を反映させます。これには、状態に関連するオブジェクトはありません。私はボードremoveCommentの機能で未定義のthis.stateを取得しています。基本的に掲示板removeComment関数で、そのインデックスのコメント要素を削除したい(引数として渡す)。イベントハンドラ関数内の `this.state`にアクセスできません:ReactJS

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

答えて

3

あなたはこのラインを使用、Boardコンポーネント方法removeCommentをバインドするのを忘れているので:

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

おかげで男:Boardコンポーネントに

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

使用これを。あなたは私の一日を救った。 –

+0

よろしくお願いします:) –

関連する問題