onSubmit onClick 的 nextjs 事件处理程序不起作用

Question

当使用 next.js（因此也会做出反应）时，我的表单的 onSubmit 方法永远不会被调用。它总是会重新加载页面，这可以通过 action 表单属性进行控制。

不过，我更希望表单不刷新页面。也许这种行为是因为 next.js 服务器端渲染？

这是我的标记：

<form action="/search" onSubmit={(e) => {
  console.log("I am never called even if the action attribute is removed");
  e.preventDefault();      
  return false;
}}>
  <input name="q"/>
  <input type="submit"/>
  <button type="submit">submit too</button>
</form>

谁能解释一下这个行为，或者告诉我如何解决这个问题，这样它就不会重新加载页面？

编辑

进一步研究发现组件中没有任何事件处理程序在工作，甚至 onClick。

Answer 1

呈现损坏的搜索组件的组件是 _document.js 并且 onClick、onSubmit 等的事件处理程序不起作用 - 当我移动搜索组件使其成为 / 中组件的子级时它开始正常工作的页面......我在 next.js 网站上阅读过要小心你在 _document.js 中输入的内容，这让我想到了移动代码

onSubmit onClick 的 nextjs 事件处理程序不起作用

nextjs event handlers for onSubmit onClick not working

javascript

node.js

reactjs

next.js

编辑