提交按钮是刷新页面而不是提交表单? (ReactJS 和 react-toastify)
Submit button is refreshing the page instead of submitting the form? (ReactJS and 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>
唯一的区别是第一个包裹在 Link 标签中以提交搜索,而另一个将提交一封电子邮件以订阅时事通讯,但它现在应该只是触发祝酒词.
帮忙?
此外,我已经尝试了 event.preventDefault(没有用),而且两者的表单格式也完全相同。
不要混合使用按钮 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 使用合成事件).
正如标题所说,我有两个格式完全相同的按钮,但其中一个在单击时刷新页面而不是提交表单。我只需要它来触发敬酒。
这是工作按钮:
<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(没有用),而且两者的表单格式也完全相同。
不要混合使用按钮 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 使用合成事件).