diff --git a/packages/react/src/routing/OutletPageManager.tsx b/packages/react/src/routing/OutletPageManager.tsx index ea77c0c625..0e0d1f9ea0 100644 --- a/packages/react/src/routing/OutletPageManager.tsx +++ b/packages/react/src/routing/OutletPageManager.tsx @@ -24,6 +24,17 @@ export class OutletPageManager extends React.Component { super(props); this.outletIsReady = false; + + /** + * This binds the scope of the following methods to the class scope. + * The `.bind` method returns a new function, so we need to assign it + * in the constructor rather than when adding or removing the listeners + * to avoid creating a new function. + */ + this.ionViewWillEnterHandler = this.ionViewWillEnterHandler.bind(this); + this.ionViewDidEnterHandler = this.ionViewDidEnterHandler.bind(this); + this.ionViewWillLeaveHandler = this.ionViewWillLeaveHandler.bind(this); + this.ionViewDidLeaveHandler = this.ionViewDidLeaveHandler.bind(this); } componentDidMount() { @@ -39,19 +50,19 @@ export class OutletPageManager extends React.Component { }); } - this.ionRouterOutlet.addEventListener('ionViewWillEnter', this.ionViewWillEnterHandler.bind(this)); - this.ionRouterOutlet.addEventListener('ionViewDidEnter', this.ionViewDidEnterHandler.bind(this)); - this.ionRouterOutlet.addEventListener('ionViewWillLeave', this.ionViewWillLeaveHandler.bind(this)); - this.ionRouterOutlet.addEventListener('ionViewDidLeave', this.ionViewDidLeaveHandler.bind(this)); + this.ionRouterOutlet.addEventListener('ionViewWillEnter', this.ionViewWillEnterHandler); + this.ionRouterOutlet.addEventListener('ionViewDidEnter', this.ionViewDidEnterHandler); + this.ionRouterOutlet.addEventListener('ionViewWillLeave', this.ionViewWillLeaveHandler); + this.ionRouterOutlet.addEventListener('ionViewDidLeave', this.ionViewDidLeaveHandler); } } componentWillUnmount() { if (this.ionRouterOutlet) { - this.ionRouterOutlet.removeEventListener('ionViewWillEnter', this.ionViewWillEnterHandler.bind(this)); - this.ionRouterOutlet.removeEventListener('ionViewDidEnter', this.ionViewDidEnterHandler.bind(this)); - this.ionRouterOutlet.removeEventListener('ionViewWillLeave', this.ionViewWillLeaveHandler.bind(this)); - this.ionRouterOutlet.removeEventListener('ionViewDidLeave', this.ionViewDidLeaveHandler.bind(this)); + this.ionRouterOutlet.removeEventListener('ionViewWillEnter', this.ionViewWillEnterHandler); + this.ionRouterOutlet.removeEventListener('ionViewDidEnter', this.ionViewDidEnterHandler); + this.ionRouterOutlet.removeEventListener('ionViewWillLeave', this.ionViewWillLeaveHandler); + this.ionRouterOutlet.removeEventListener('ionViewDidLeave', this.ionViewDidLeaveHandler); } } diff --git a/packages/react/src/routing/PageManager.tsx b/packages/react/src/routing/PageManager.tsx index 8c12b460ac..1ba3f94b98 100644 --- a/packages/react/src/routing/PageManager.tsx +++ b/packages/react/src/routing/PageManager.tsx @@ -23,6 +23,17 @@ export class PageManager extends React.PureComponent { this.ionPageElementRef = React.createRef(); // React refs must be stable (not created inline). this.stableMergedRefs = mergeRefs(this.ionPageElementRef, this.props.forwardedRef); + + /** + * This binds the scope of the following methods to the class scope. + * The `.bind` method returns a new function, so we need to assign it + * in the constructor rather than when adding or removing the listeners + * to avoid creating a new function. + */ + this.ionViewWillEnterHandler = this.ionViewWillEnterHandler.bind(this); + this.ionViewDidEnterHandler = this.ionViewDidEnterHandler.bind(this); + this.ionViewWillLeaveHandler = this.ionViewWillLeaveHandler.bind(this); + this.ionViewDidLeaveHandler = this.ionViewDidLeaveHandler.bind(this); } componentDidMount() { @@ -31,19 +42,19 @@ export class PageManager extends React.PureComponent { this.ionPageElementRef.current.classList.add('ion-page-invisible'); } this.context.registerIonPage(this.ionPageElementRef.current, this.props.routeInfo!); - this.ionPageElementRef.current.addEventListener('ionViewWillEnter', this.ionViewWillEnterHandler.bind(this)); - this.ionPageElementRef.current.addEventListener('ionViewDidEnter', this.ionViewDidEnterHandler.bind(this)); - this.ionPageElementRef.current.addEventListener('ionViewWillLeave', this.ionViewWillLeaveHandler.bind(this)); - this.ionPageElementRef.current.addEventListener('ionViewDidLeave', this.ionViewDidLeaveHandler.bind(this)); + this.ionPageElementRef.current.addEventListener('ionViewWillEnter', this.ionViewWillEnterHandler); + this.ionPageElementRef.current.addEventListener('ionViewDidEnter', this.ionViewDidEnterHandler); + this.ionPageElementRef.current.addEventListener('ionViewWillLeave', this.ionViewWillLeaveHandler); + this.ionPageElementRef.current.addEventListener('ionViewDidLeave', this.ionViewDidLeaveHandler); } } componentWillUnmount() { if (this.ionPageElementRef.current) { - this.ionPageElementRef.current.removeEventListener('ionViewWillEnter', this.ionViewWillEnterHandler.bind(this)); - this.ionPageElementRef.current.removeEventListener('ionViewDidEnter', this.ionViewDidEnterHandler.bind(this)); - this.ionPageElementRef.current.removeEventListener('ionViewWillLeave', this.ionViewWillLeaveHandler.bind(this)); - this.ionPageElementRef.current.removeEventListener('ionViewDidLeave', this.ionViewDidLeaveHandler.bind(this)); + this.ionPageElementRef.current.removeEventListener('ionViewWillEnter', this.ionViewWillEnterHandler); + this.ionPageElementRef.current.removeEventListener('ionViewDidEnter', this.ionViewDidEnterHandler); + this.ionPageElementRef.current.removeEventListener('ionViewWillLeave', this.ionViewWillLeaveHandler); + this.ionPageElementRef.current.removeEventListener('ionViewDidLeave', this.ionViewDidLeaveHandler); } }