窗口滚动到顶部在 nextjs 客户端组件中不起作用

Question

这是客户端组件代码

'use client'
import { Mdx } from "components/mdx-components"
import { Button } from "@components/ui/button"
import { Github } from "@lib/icons"
import SubmitChallenge from "./SubmitChallenge"
import Link from 'next/link'
import React from 'react'

function NewClient({ post }: { post: any }) {

    const handleScrollToTop = () => {
        console.log("hello", window)
        window.scrollTo({ top: 0, behavior: "smooth" });
    }

    return (
        <div>
            <article className="py-6 prose max-w-[65%] px-4 dark:prose-invert mx-auto">
                <p>Challenge #{post.serial}</p>
                <h1 className="mb-2">{post.title}</h1>

                <hr className="block my-6 lg:my-10 border-muted-foreground/30" />
                <Mdx code={post.body.code} />
                <div className={`flex`}>
                    <Button onClick={handleScrollToTop} className="gap-2 w-full">
                        <img src="/warup.png" alt="scroll" className="h-4 w-4" />
                    </Button>
                    <Button className="gap-2 w-full" variant="outline">
                        <Github className="stroke-foreground" />
                    <Link href={`${post.github_link}`} target="_blank">View on Github</Link>
                    </Button>
                    <SubmitChallenge serial={post.serial} title={post.title} />
                </div>
            </article>
        </div>
    )
}

export default NewClient

我在服务器组件中导入客户端组件 我想在我的客户端组件中使用滚动到顶部

但它没有按预期工作
当我点击滚动到顶部按钮时它不会出现在顶部

Answer 1

您正在定义一个匿名函数，但没有在 onClick 上调用它；

更改此行：

<Button onClick={handleScrollToTop} className="gap-2 w-full">
   <img src="/warup.png" alt="scroll" className="h-4 w-4" />
</Button>

对此

<Button onClick={handleScrollToTop()} className="gap-2 w-full">
      <img src="/warup.png" alt="scroll" className="h-4 w-4" />
 </Button>

您的点击现在应该可以工作，因为现在点击时您是

executing

函数而不是调用其引用