时间戳

首页 > 解决方案 > 提交按钮是刷新页面而不是提交表单？（ReactJS 和 react-toastify）

reactjs - 提交按钮是刷新页面而不是提交表单？（ReactJS 和 react-toastify）

问题描述

正如标题所说，我有两个具有完全相同格式的按钮，但是一个在单击时刷新页面而不是提交表单。我只需要它来触发敬酒。

这是工作按钮：

<button
    type="submit"
    className="btn btn-primary my-2 my-sm-0"
    style={{ marginTop: "10px" }}
    onClick={() => onSubmit()}
>
  <i className="fas fa-search"></i>
</button>

这是不工作的按钮：

<button
    type="submit"
    className="btn btn-primary my-2 my-sm-0"
    style={{ marginTop: "10px" }}
    onClick={() => onSubmit()}
>
    <i className="fas fa-paper-plane"></i>
</button>

唯一的区别是第一个包含在链接标签中以提交搜索，而另一个将提交电子邮件以订阅新闻通讯，但它现在应该只是触发祝酒词。

帮助？

另外，我已经尝试过 event.preventDefault （没有用），并且两者的表单格式也完全相同。

标签： reactjsbuttonpage-refreshonsubmitreact-toastify

解决方案

不要混合按钮type="submit" 和处理程序，onClick因为这将提交关联的表单并采取任何默认的表单提交操作。

另外，我已经尝试过event.preventDefault（没有用），并且两者的格式也完全相同。

这不起作用，因为您的onSubmit回调没有收到事件对象。

将类型更改为“按钮”并使用onClick处理程序进行表单数据提交

<button
    type="button" // <-- button type
    className="btn btn-primary my-2 my-sm-0"
    style={{ marginTop: "10px" }}
    onClick={onSubmit}
>
  <i className="fas fa-search"></i>
</button>

或者将onSubmit处理程序从按钮移动到表单

<form onSubmit={onSubmit} ...>
  ...

  <button
      type="submit"
      className="btn btn-primary my-2 my-sm-0"
      style={{ marginTop: "10px" }}
  >
    <i className="fas fa-search"></i>
  </button>

  ...

</form>

您还需要以onSubmit它也消耗事件的方式将 附加到任一元素，以便您可以event.preventDefault()使用它。

任何一个

onSubmit={e => onSubmit(e)}
onClick={e => onSubmit(e)}

或者

onSubmit={onSubmit}
onClick={onSubmit}

记住要真正打电话event.preventDefault()

const onSubmit = e => {
  e.preventDefault();
  ...
}

如果由于链接包装还有其他问题，那么您还可以event.stopPropgation()在处理程序中调用以防止事件在 DOM 中冒泡（在这种情况下为 virtualDOM，因为 react 使用合成事件）。

推荐阅读