onClick「this」バインディング

Question

export default React.createClass({ 

displayName: 'Test', 

    onItemClick(item) { 
    console.log(item); 
    }, 

render() { 
    return <div onClick={() => this.onItemClick('apple')}>Fruit</div> 
}); 

divをクリックすると、Uncaught TypeError: Cannot read property 'onItemClick' of undefinedが表示されます。 bindでも試してみましたが、同じ結果が出ました。

その後編集：

実際のコードが異なっています。私は、divオブジェクトを持つcircleオブジェクト内にitemsの配列を配置しています。ループ外で、私がonItemClick()関数を呼び出すとうまく動作しますが、ループの中で上記のエラーが発生します。

export default React.createClass({ 

displayName: 'Test', 

onItemClick (item) { 
    console.log(item); 
    }, 

render() { 
    var circle = { 
     'one': { items: [] }, 
     'two': { items: [] }, 
     'three': { items: [] }, 
     'four': { items: [] } 
    }; 

    ['one', 'two', 'three', 'four'].forEach(function (k, i) { 
     for (var j = 1; j <= 10; j++) { 
     var itemNo = (i * 10 + j); 
     circle[k].items.push(<div className={"item item-"+itemNo} onClick={() => this.onItemClick(itemNo)}>{itemNo}</div>); 
     } 
    }); 
return (
    <div>{circle.one.items}</div> 
)}; 

どうすればこの問題に対処できますか？コンポーネントへ

Answer 1

forEachハンドラは、標準的な機能であり、異なるthisを持っています。それを矢印の関数で置き換えれば、うまくいくはずです。

render() { 
    var circle = { 
    'one': { items: [] }, 
    'two': { items: [] }, 
    'three': { items: [] }, 
    'four': { items: [] } 
    }; 
    ['one', 'two', 'three', 'four'].forEach((k, i) => { 
//           ^^^^^^^^^^ 
    for (var j = 1; j <= 10; j++) { 
     var itemNo = (i * 10 + j); 
     circle[k].items.push(<div className={"item item-"+itemNo} onClick={() => this.onItemClick(itemNo)}>{itemNo}</div>); 
    } 
    }); 
    return (
    <div>{circle.one.items}</div> 
)}; 
} 

Answer 2

return <div onClick={this.onItemClick.bind(this, 'apple')}>Fruit</div> 

バインドonItemClickとforEachハンドラ内'apple'

Answer 3

との最初の引数を埋め、thisは、その範囲を失います。

let _this = this; 

私はループの上に_thisを宣言して内部で使用しました。

render() { 
    var circle = { 
    'one': { items: [] }, 
    'two': { items: [] }, 
    'three': { items: [] }, 
    'four': { items: [] } 
    }; 
    var _this = this; 
    ['one', 'two', 'three', 'four'].forEach(function (k, i) { 
    for (var j = 1; j <= 10; j++) { 
     var itemNo = (i * 10 + j); 
     circle[k].items.push(<div className={"item item-"+itemNo} onClick={() => _this.onItemClick(itemNo)}>{itemNo}</div>); 
    } 
              }); 
    return (
    <div>{circle.one.items}</div> 
) 
}