时间戳

首页 > 解决方案 > 如何在 Next js 中使用自定义 Javascript

reactjs - 如何在 Next js 中使用自定义 Javascript

问题描述

来自 React，我真的很困惑。在pages/index.js中，假设我有一个带有onClick监听器的按钮，单击该按钮将在console. 我该如何实施？我希望该页面是静态生成的，并为该按钮提供一些功能。

我遇到很多麻烦的原因是因为在 React 教程甚至我的项目中，如果我需要一些功能，我会这样做：

function handleClick() {
  document.body.style.background = "black" 
  console.log("you clicked") //nothing is logged in console
}

export default function App() {
  return(
    <button onClick{() => handleClick}>Click Me</button>
  )
}

我打算用这个 Next.js 来看看它是如何state工作的。但我遇到了一个不同的问题。除非我使用inline functionin onClick，否则它不起作用。如果我使用单独的handleClick函数，DOM 甚至不会显示我有一个onclick事件。我了解到这是因为 Nextjs 是在服务器端呈现的，所以它无法访问 DOM 和控制台等。那我该怎么做呢？

我刚从 React 过渡，在每个教程中，这些人都会使用handleClickfunc 或其他任何东西来处理事件和东西。但是我在 Next 中找不到解决方案，那么大家是如何处理的呢？因为页面有交互式按钮对吗？那些页面不是静态生成的吗？

标签： reactjsnext.js

解决方案

您忘记了呼叫功能handleClick：

<button onClick{() => handleClick()}></button>

推荐阅读