提交按钮是刷新页面而不是提交表单？ （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>

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

帮助？

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

Answer 1

不要混用按钮 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（在这种情况下为虚拟 DOM，因为 react 使用合成事件 em>)。