React イベント処理の中で「TypeError: Cannot read property ‘props’ of undefined」となる

下記コードでは、「TypeError: Cannot read property ‘props’ of undefined」となります。

handle(){
console.log(this.props.xxxx); //エラーが起きる
}

render() {
return (<button onclick={this.handle}>Click!<button>
);
}
}

関数の呼び出し方を変えることで、Reactのオブジェクト(props)にアクセスできるようになります。

handle(e){
console.log(this.props.xxxx); 
}

render() {
return (<button onclick={(e)=this.handle(e)}>Click!<button>
);
}
}
作りながら学ぶ React入門

アロー関数を使用すると、thisをバインドしなくてもつかえるということのようです。

アロー関数と関数の違いとthisの評価のされ方

タイトルとURLをコピーしました