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

Question

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

这是工作按钮：

<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>

唯一的区别是第一个包裹在 Link 标签中以提交搜索，而另一个将提交一封电子邮件以订阅时事通讯，但它现在应该只是触发祝酒词.

帮忙?

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

Answer 1

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

Also, I've tried event.preventDefault already (didn't work), and both are in the exact same form format as well.

这没有用，因为您的 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();
  ...
}

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