onClick 事件未调用函数

Question

我正在编写以下 TypeScript 类：

"use client"

import { Database } from "@/types/supabase";
import { createClient } from "@/utils/supabase/client";
import Image from "next/image";
import Link from "next/link";

import { Lora } from "next/font/google";
import { clickPost } from "../action";

const lora = Lora({ weight: "400", subsets: ["latin"] });

interface PostProps {
    type: string;
    video: Database["public"]["Tables"]["videos"]["Row"];
    isActiveSub: boolean;
  }

export const Post = ({type, video, isActiveSub}:PostProps) => {
       
        return (
            <div className="hover:cursor-pointer" onClick={clickPost}>
                <div className="bg-white flex flex-col md:flex-col-2 flex-row rounded-lg max-w-screen md:flex-row-reverse hover:bg-gray-100">
                    
                    {/* Picture */}
                    <div className="">
                        {video.picture_uri && <Image
                            src={"/VideoImages/" + video.picture_uri}
                            alt="Hero"
                            sizes="100vw"
                            className="aspect-video object-cover w-full h-auto rounded-lg"
                            width={500}
                            height={400}
                            /> }
                    </div>

                    {/* Text */}
                    <div className="text-center md:text-left p-4 space-y-4">
                        <div className="text-primary text-sm md:text-md">
                            {video.channel_name}
                        </div>
                        <div className="text-lg md:text-xl">
                            {video.title_1}
                        </div>
                        <div className="hidden md:block text-sm md:text-md">
                            <p className={lora.className}>
                                {queryDescription("big", video.id)}
                                <span className="text-primary"> Leggi di più</span>
                            </p>
                        </div>
                        <div className="block md:hidden text-sm md:text-md">
                            <p className={lora.className}>
                                {queryDescription("small", video.id)}
                                <span className="text-primary"> Leggi di più</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        )
}

async function clickPost() {
    console.log("qwert");
    window.location.reload();
}

一切正常并且显示正常。唯一不起作用的是第

<div className="hover:cursor-pointer" onClick={clickPost}>

行，其中正确显示了光标指针，但未调用 clickPost 函数。我是不是做错了什么？

我尝试通过将

onClick={clickPost}

替换为

onClick={() => clickPost()}

来编辑 clickPost 调用，但没有成功。

我还尝试将函数移动到不同的文件。

Answer 1

在您的代码中，您在

clickPost

组件之外定义了

Post

函数。在 Next.js 和 React 中，尤其是在使用

'use client'

时，在组件内定义事件处理程序非常重要。组件外部定义的函数可能无法在客户端正常工作。

尝试将

clickPost

函数移动到

Post

组件中，如下所示：

export const Post = ({ type, video, isActiveSub }: PostProps) => {
  
  const clickPost = async () => {
    console.log("qwert");
    window.location.reload();
  };

  return (
    <div className="hover:cursor-pointer" onClick={clickPost}>
      <div className="bg-white flex flex-col md:flex-col-2 flex-row rounded-lg max-w-screen md:flex-row-reverse hover:bg-gray-100">
        {/* Content */}
      </div>
    </div>
  );
};

通过在组件内部定义

clickPost

，可以确保该函数是客户端代码的一部分，并且

onClick

事件应该正常工作。