【react】関数にbindをつけ忘れると〇〇 is a not functionでエラーになる

reactの関数はhello() {}のように変数名とスコープで構成されています。

例としてback関数を作りました。元のページに戻るだけの簡素な関数です。

back(){
this.props.navigator.replacePage({component: TopPage})
}

この関数をダイアログの親コンポーネントに渡して実行したところ

〇〇 is a not functionというエラーが起きてダイアログのボタンを押しても

何も反応しなくなりました。

<EnterDialog
opened={this.state.isOpenedDialogOpen}
leave={() => {this.back()}}
/>

関数の渡し方もreactの公式に合わせて作ったので特におかしなところは見当たらず。

親ダイアログは以下のような構成ですが、こちらも受け取りの際は特に不備はなし。
<Dialog
className=”confirm-dialog”
isOpen={props.opened}
isCancelable={false}>
<div className=’header’>
<div className=”leave” modifier=’quiet’ onClick={props.leave}>
<Icon size={25} style={{color: “#FFB000”}} icon={{default: ‘ion-ios-close’, material: ‘ion-md-close’}} />
</div>
</div>
</Dialog>

結局、原因はコンストラクタ内で宣言した関数のbind(this)が抜けていたのが原因でした。

正しくはこう↓