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

【问题标题】：nextjs event handlers for onSubmit onClick not workingonSubmit onClick 的 nextjs 事件处理程序不起作用
【发布时间】：2018-02-03 21:48:30
【问题描述】：

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

但是，我希望表单不刷新页面。也许这种行为是因为 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 也没有。

【问题讨论】：

您是否尝试返回 True？
它从来没有碰到那个代码 - 控制台日志永远不会触发
你能提供一个更完整的例子吗？我刚刚将此代码粘贴到 next.js 应用程序中，它工作正常。
感谢您的宝贵时间 - 这是一个 _document.js 问题，请参阅下面的答案

标签： javascript node.js reactjs next.js

【解决方案1】：

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

【讨论】：