thisがundefindになった！
はじめに
React Nativeでアプリを作成している際、ボタンをタップした時のタップイベントメソッドの中でthis.プロパティ名で値を参照したところundefindになってしまいました。
値を代入している別の部分をデバッグして値が入っていることは間違いないと確信してから試してもやはりundefindになってしまっていました。
javaScriptでのthisは他言語のそれとは少し異なるようです！
undefindになっていたコード
コードは以下の様なものでした。constructorの中でプロパティを定義してボタンのイベントの中でconosle出力するだけです。
色々考えたのですが、javaScriptが得意なエンジニアの方に原因を聞くまで何が悪いか全くわかりませんでした。
export class ButtonTest extends React.Component {
constructor(){
super()
this.name = 'harumi';
}
onButtonPressed() {
console.log('this.name');
}
render() {
return (
<View style={styles.container}>
<Button
onPress={this.onButtonPressed}
title="Button"
color="#841584"
/>
</View>
);
}
}解決策
解決策としてはbindを使いthisを渡すことで解決できました！
onButtonPressedメソッド内でのthisはonButtonPressed自身を指し示してしまっていたようです。onButtonPressedメソッドの中にはnameという変数を定義していないのでundefindになってしまっていたのです。
bindでクラス全体のthisを渡すことによってthis.nameというプロパティを読みに行けることができます。
export class ButtonTest extends React.Component {
constructor(){
super()
this.name = 'harumi';
}
onButtonPressed() {
console.log('this.name');
}
render() {
return (
<View style={styles.container}>
<Button
onPress={this.onButtonPressed.bind(this)}
title="Button"
color="#841584"
/>
</View>
);
}
}thisについて理解を深めるために【JavaScript】アロー関数式を学ぶついでにthisも復習する話という記事が参考になりました
