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)が抜けていたのが原因でした。
正しくはこう↓
this.back = this.back.bind(this);
自分の関数はこのbindが抜けていたため何度書き直しても同じエラーが吐き続けたという訳でした。
reactは関数が見つからなくてもエラーにならないので探すのにかなり時間をかけました。
