IonButton中如何同时使用href与onClick()方法？

这个坑我之前踩过！当你给IonButton加上href属性后，它会被渲染成标准的<a>标签，浏览器的默认跳转行为会优先执行，直接打断了你的onClick逻辑——这就是为什么单独用onClick没问题，加了href就只跳转不执行函数的原因。

下面给你两种靠谱的解决方案，根据你的项目情况选就行：

方案1：移除href，在onClick里手动处理跳转（推荐） #

这种方式更可控，尤其是当saveData()是异步操作（比如调用后端接口存数据）时，能确保数据保存完成后再跳转。

以React + Ionic为例，用React Router的useNavigate钩子：

import { useNavigate } from 'react-router-dom';
import { IonButton } from '@ionic/react';

function YourComponent() {
  const navigate = useNavigate();

  // 封装处理函数
  const handleSaveAndRedirect = async () => {
    // 先执行保存逻辑，如果是异步要加await
    await saveData();
    // 保存完成后再跳转
    navigate('/create/');
  };

  return (
    <IonButton color="primary" onClick={handleSaveAndRedirect}>
      Save
    </IonButton>
  );
}

如果是Angular项目，可以用NavController来跳转：

import { NavController } from '@ionic/angular';

constructor(private navCtrl: NavController) {}

async handleSaveAndRedirect() {
  await this.saveData();
  this.navCtrl.navigateForward('/create/');
}

方案2：阻止默认跳转，在onClick里完成逻辑后再跳转 #

如果你一定要保留href属性（比如需要锚点跳转的默认行为），可以通过阻止事件的默认行为，先执行saveData，再手动触发跳转：

const handleClick = async (e) => {
  // 阻止浏览器默认的href跳转行为
  e.preventDefault();
  // 执行保存逻辑
  await saveData();
  // 手动跳转到目标页面
  window.location.href = '/create/';
  // 同样推荐用Ionic的导航方法替代window.location
};

<IonButton color="primary" onClick={handleClick} href="/create/">
  Save
</IonButton>

关键注意点 #

如果saveData()是异步操作（比如调用API），一定要等异步操作完成后再执行跳转——否则可能出现数据还没保存成功，页面就已经跳走的情况，用await或者.then()来确保顺序。

内容的提问来源于stack exchange，提问作者esafresa