如何覆盖 IonBackButton 的 onclick 行为答案

【问题标题】：How can I override the onclick behavior of IonBackButton如何覆盖 IonBackButton 的 onclick 行为
【发布时间】：2020-08-17 19:06:37
【问题描述】：

如何覆盖IonBackButton 的点击行为？我能够添加自己的侦听器，但我不知道如何阻止默认侦听器触发。如果用户有未保存的数据，我打算警告他们。

【问题讨论】：

检查这个：ionicframework.com/docs/developing/hardware-back-button
我认为这不可能，但您可以创建自己的后退按钮。

标签： javascript reactjs ionic-framework ionic-react

【解决方案1】：

回复您对我上一篇文章的评论，我不确定我是否理解您真正想要的内容，但我认为只要条件不成立，您就可以为用户禁用后退按钮。并且一旦满足条件，将 disabled 改为 false。

在html中，

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

在 .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
    }
}

【讨论】：

【解决方案2】：

如果你使用 ionic 4/5，你可以这样设置，

<ion-buttons slot="start">
      <ion-back-button defaultHref="home"></ion-back-button>
</ion-buttons>

如果不行，你也可以使用ion-icon和put click功能导航到其他页面。

【讨论】：

这会改变 url 但它仍然可以导航。如果条件为真，我想阻止导航发生。
是否有一种简单的方法可以制作在 iOS 和 Android 上看起来相同的自定义后退按钮？

【解决方案3】：

我使用IonBackButton 中使用的NavContext 制作了一个自定义后退按钮。这就是IonBackButton 的实现方式。 https://github.com/ionic-team/ionic-framework/blob/main/packages/react/src/components/navigation/IonBackButton.tsx

IonBackButton 的onClick 实现如下

(e: React.MouseEvent) => {
    const { defaultHref, routerAnimation } = this.props
    if (this.context.hasIonicRouter()) {
      e.stopPropagation()
      this.context.goBack(defaultHref, routerAnimation)
    } else if (defaultHref !== undefined) {
      window.location.href = defaultHref
    }
  }

这是一个使用NavContext的简单自定义BackButton

import { NavContext } from "@ionic/react"
import React, { useContext } from "react"

interface IBackButtonProps {
  defaultHref?: string
}

export const BackButton: React.FC<IBackButtonProps> = function BackButton({
  defaultHref = "/",
}) {
  const navContext = useContext(NavContext)
  const onClick = (e: React.MouseEvent) => {
    if (navContext.hasIonicRouter()) {
      e.stopPropagation()
      navContext.goBack(defaultHref, undefined)
    } else if (defaultHref !== undefined) {
      window.location.href = defaultHref
    }
  }

  return <button onClick={onClick} style={{ width: 48, height: 48 }} />
}

请确保可能存在一些意外行为，因为上述组件仅实现 onClick 事件。它不使用IonBackButtonInner，它是IonBackButton 的内部组件。

【讨论】：

【解决方案4】：

您还可以覆盖后退按钮的订阅，例如在 app.component.ts 中

  private backButtonEvent() {
    this.platform.backButton.subscribeWithPriority(1, () => {
      console.log('BACK BUTTON TRIGGERED');
      this.yourFunction();
    });
  }

如果您只想阻止当前 ts 文件中的任何操作：

ionViewWillEnter() {
    this.backButtonSubscription = this.platform.backButton.subscribeWithPriority(9999, () => {});
  }

ionViewWillLeave() {
  this.backButtonSubscription.unsubscribe();
}

【讨论】：