Eventos 点击 dentro 做 next.js

Question

我正在使用 next 开发一个应用程序，但遇到了一个问题：“无论我做什么，onClick 都不会被调用，我已经将它用作组件内的匿名函数，我已经使用了外部函数但没有任何作用，如果您找到解决方案，请告诉我一些信息，这是代码

import React, { useState } from 'react'
import { Heart, List, MagnifyingGlass, Truck } from 'phosphor-react'
import { Section } from '..'
import Link from 'next/link'
import { HeaderListLinkList } from './HeaderListLinkList'
import { UserLoggedHeader } from './UserLoggedHeader'
import Image from 'next/image'
import { BsFacebook, BsLinkedin } from 'react-icons/bs'


const links = [
  {
    'url':'/pc-gamer',
    'link':'PC Gamer'
  },
  {
    'url':'/home-office',
    'link':'Home Office'
  },
  {
    'url':'/workstation',
    'link':'Workstation'
  },
  {
    'url':'/periferics',
    'link':'Periferics'
  },
  {
    'url':'/hardware',
    'link':'Hardware'
  }
]

const Header:React.FC = () => {
  const [status, setStatus] = useState(false)

  function handleClick() {
    alert("Click!")
  }

  return (
    <header className="w-[100%] bg-black sticky top-[-60px] z-[5000] header-box-shadow">
      <div className="w-[100%] h-[60px] flex items-center justify-center bg-[#FE093C]">
        <Image 
          src="/assets/img/header.webp" 
          className='object-cover'
          height={1000}
          width={1000}
          alt='logo'
        />
      </div>
      <Section.Content>
        <div className="h-[100px] flex justify-between items-center gap-12 m-auto">
          <section className='flex gap-10'>
            <Link href='/'>
              <Image 
                src="/assets/img/logo1.png" 
                alt="logo" 
                className='pb-1'
                width={170}
                height={170}
              />
            </Link>



            <div className="flex-1 flex justify-center items-center gap-3">
              <div className="flex items-center gap-6 relative border">
                <ul className="flex justify-center items-end pt-1 gap-3 relative items-link-list">
                  {links.map((item, i) => (
                    <HeaderListLinkList link={item} key={i}/>
                  ))}                  
                </ul>
                <div className='flex justify-normal items-center gap-2'>
                  <input
                    type="text"
                    placeholder="O que você procura..."
                    className="w-[185px]"
                  />
                    <button className='p-[.4rem]'>
                      <i className='text-[#FFF] text-[1.5rem] font-extrabold'>
                        <MagnifyingGlass />
                      </i>
                    </button>
                </div>
              </div>
              {status ? (
                <UserLoggedHeader />
              ):(
                <div className='ml-auto flex justify-end items-center gap-3 flex-1 border'>
                  <button
                    onClick={handleClick}
                    className='z-[10000] flex justify-center gap-2 items-center bg-slate-800/50 py-2 pl-2 pr-4 rounded-md'>
                    <i className='text-[1.5rem]'>
                      <BsLinkedin />
                    </i>
                    Linkedin
                  </button>
                  <button
                    onClick={handleClick}
                    className='z-[10000] flex justify-center items-center bg-slate-800/50 text-white rounded-md pr-2'>
                    <Image 
                      src='/assets/img/google-logo.png'
                      alt='google-logo'
                      height={40}
                      width={40}
                    />
                    Entre com Google
                  </button>
                </div>
              )}
            </div>
          </section>
        </div>
      </Section.Content>
    </header>
  )
}

export default Header

Answer 1

发表答案，因为评论不够大......

但这对我有用。我把你所有的备用部件都拆掉了，因为我没有。如果你也这样做，它对你有用吗？如果不是，可能与您的应用程序组件有关。

    'use client'

import React, {useState} from 'react'
import Link from 'next/link'

const Header: React.FC = () => {
  const [status, setStatus] = useState(false)

  function handleClick() {
    alert("Click!")
  }

  return (
    <header className="w-[100%] bg-black sticky top-[-60px] z-[5000] header-box-shadow">
      <div className="w-[100%] h-[60px] flex items-center justify-center bg-[#FE093C]">

      </div>

      <div className="h-[100px] flex justify-between items-center gap-12 m-auto">
        <section className='flex gap-10'>
          <Link href='/'>

          </Link>

          <div className="flex-1 flex justify-center items-center gap-3">
            <div className="flex items-center gap-6 relative border">
              <ul className="flex justify-center items-end pt-1 gap-3 relative items-link-list">

              </ul>
              <div className='flex justify-normal items-center gap-2'>
                <input
                  type="text"
                  placeholder="O que você procura..."
                  className="w-[185px]"
                />
                <button className='p-[.4rem]'>
                  <i className='text-[#FFF] text-[1.5rem] font-extrabold'>

                  </i>
                </button>
              </div>
            </div>
            {status ? (
              <div></div>
              ):(
              <div className='ml-auto flex justify-end items-center gap-3 flex-1 border'>
                <button
                  onClick={handleClick}
                  className='z-[10000] flex justify-center gap-2 items-center bg-slate-800/50 py-2 pl-2 pr-4 rounded-md'>
                  <i className='text-[1.5rem]'>

                  </i>
                  Linkedin
                </button>
                <button
                  onClick={handleClick}
                  className='z-[10000] flex justify-center items-center bg-slate-800/50 text-white rounded-md pr-2'>

                  Entre com Google
                </button>
              </div>
              )}
          </div>
        </section>
      </div>
    </header>
  );
}

export default Header;