ReactJS webpack babel：パラメータを介して関数が渡されたボタンをクリックすると_this2が未定義です

Question

ここで本当に明白な何かが間違っていますが、私はlyndaチュートリアル "Learning React.js"をやろうとしています。私はES6クラスを使用しており、webpack経由でBabelを使用しています。

問題は、ボードクラスからのNoteクラスへのパラメータとして渡される関数を実行しています。

私はのように記述することができる「注意」クラスを持っている：

//Method in Board class. I map through an array and call this function on each element to create notes. 
eachNote(note) { 
    return (
     <Note key = { note.id } id = { note.id } onRemove = { (id) => this.remove(id) }> 
      { note.note } 
     </Note> 
    ) 
} 

： onRemoveは次のように注意する会から小道具として渡されています機能がある

remove() { 
    this.props.onRemove(this.props.id); 
} 
//Notes class 
render() { 
    return (
     <div className="note"> 
      <p>{this.props.children}</p> 
      <span> 
       <button onClick={() => this.remove() }>X</button> 
      </span> 
     </div> 
    ); 
} 

Boardクラスのremove（）メソッドは、次のようになります。

//Remove method in the Board class 
remove(id) { 
    let notes = this.state.notes.filter(note => note.id !== id); 
    this.setState({notes}); 
} 

私はノートのXボタンをクリックすると、それはノートクラスでローカル関数を実行DOESが、その後プロパティ（onRemove（））として渡されるメソッドを実行し、代わりに私が（Firefoxの）取得していません：

TypeError: _this2 is undefined 

とChromeで私が取得：

Cannot read property 'remove' of undefined 

それはしかし機能を見つけることができない理由を私は得ることはありません、私は正確にこれをしなかった以前のチュートリアルをやったし、それは大丈夫機能を見つけることができます。私は多分本当に簡単なものを見落としてしまったでしょう。

[EDIT：エクストラ会情報]それは私が何を期待出力コンソールで

//Board's render method 
render() { 
    return (
     <div className='board'> 
      { this.state.notes.map(this.eachNote) } 
     </div> 
    ); 
} 

。

Answer 1

"子"コンポーネントがクリックすると正しく理解すると、 クリックは親コンポーネント（ボード）を伝播しません。

In Boardでは、this.state（正しく）を変更していますが、 "chil"コンポーネントに渡して、 "this"が変わります。

試着（ボード）： This.remove = this.remove.bind（this）;太陽の下ですべてをしようとの午後の後

https://reactjs.org/docs/handling-events.html

Answer 2

、私は誰がこの問題を抱えた場合の私の解決策を表示したいと思います。

私のレンダリング方法は、メモの配列をマッピングし、各要素から作成しています。問題は、ノート要素を作成した関数に「ノート」オブジェクトを渡していないことでした。だから私は、これまで私のレンダリング方法を変更することにより、それを修正：

render() { 
    return (
     <div className='board'> 
      { this.state.notes.map((note) => this.eachNote(note)) } 
     </div> 
    ); 
} 

私はよく分からないが、私は、各ノートのインスタンスは、それが、これはそれに与えられた所有のしているので、これはうまくいくと思います。もし誰かがより良い説明をしてくれたら、私に知らせてください。