提交按钮正在刷新页面而不是提交表单?(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>

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

帮助？

另外，我已经尝试了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(在这种情况下为 virtualDOM，因为 react 使用合成事件(。