Question

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

但是，我更喜欢表单不刷新页面。也许这种行为是因为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等的事件处理程序将无法工作 - 当我移动搜索组件以使其成为/ pages中组件的子组件时开始工作正常...我已经阅读了next.js网站，要小心你在_document.js中放了什么，这给了我移动代码的想法

nextSs事件处理程序为onSubmit onClick无法正常工作

修改

1 个答案: