javascriptreactjsionic-frameworkionic-react

How can I override the onclick behavior of IonBackButton


How can I override the onclick behavior of an IonBackButton? I was able to add my own listener but I cannot figure how to prevent the default listener from firing. I plan to warn the user if they have unsaved data.


Solution

  • Replying from your comment on my last post, I'm not sure if I understand what you truly want but in my opinion you can just make the back button disabled for the user as long as the condition is not true. And once the condition is met, change the disabled to false.

    In html,

    <ion-buttons slot="start">
          <ion-back-button disabled="btnCondition"></ion-back-button>
    </ion-buttons>
    

    In .ts,

    btnCondition:boolean = true; //declare
    
    yourfunction() {
        //Whatever code you want
        if(yourcondition==true){
          btnCondition = false; //This will make the back button to work
        }
        elseif(yourcondition==false) {
          //Do anything
        }
    }