如何在 IonButton 中将 href 与 onClick() 一起使用？

Question

下面的 onClick() 函数在没有 href 的情况下按预期工作。但是当我添加 href 时，似乎只有 href 运行，而不是 onClick() 函数。如何既运行 onClick() 函数又将用户发送到新页面？

                <IonButton
                    color="primary"
                    onClick={() => {saveData()}}
                    href="/create/"
                >Save</IonButton>

Answer 1

JS event 的

preventDefault() 方法将限制 JS 引擎执行要在任何事件上执行的 HTML 标记的默认功能。在您的情况下，导航到 <a> 标签的 href 属性中提到的 URL。

在处理程序中调用 preventDefault 单击事件，如下所示：

const history = useHistory();

// ....

const saveData = event => {
  event.preventDefault();

  // here you can implement your logic
  history.push("/create");
}

Answer 2

你不是真的想用href用history

const history = useHistory();

<IonButton color="primary"
  onClick={(event) => { 
      event.preventDefault();
      saveData(); 
      history.push("/create")}}
> Save
</IonButton>

如何在 IonButton 中将 href 与 onClick() 一起使用？

How to use href with onClick() in IonButton?

reactjs

ionic-framework

ionic-react