Next.js中Components文件夹内onClick函数失效问题求助

问题描述 #

pages/index.js中的按钮onClick功能正常，但components文件夹下的ComponentX.js内的按钮点击无响应。

项目结构 #

project-root/
|-- pages/
|   |-- api/
|   |   |-- app.js
|   |-- index.js
|   |-- _app.js
|-- components/
|   |-- App.js
|   |-- ComponentX.js
|-- redux/
|-- styles/
|-- public/
|-- ...
|-- next.config.js
|-- package.json

相关代码 #

ComponentX.js（点击失效组件） #

import '../styles/GameContainer.scss'
import useShotlessLoser from '../hooks/useShotlessLoser'
import CountDownContainer from './CountDownContainer';
import React from 'react'
import { connect } from 'react-redux'

const GameBtnContainer = ({goBtnVisible, setGoBtnVisible, players}) => {

    const {shotlessLoser, handleDrawName} = useShotlessLoser()

    const handleClickToStartDraw = () => {
        console.log("entrei")
        setGoBtnVisible(false)
    }

    const handleClickOnWinner = () => {
        setGoBtnVisible(true)
    }
    

    return (
        <div className="gameBtnContainer">
            {goBtnVisible ? ( 
                <button 
                    className={`drawBtn ${players.length === 0 ? "disabledGoButton" : ""}`} 
                    disabled={players.length === 0} 
                    onClick={() => {handleClickToStartDraw(); handleDrawName()}}
                >GO</button> 
            ) : <CountDownContainer shotlessLoser={shotlessLoser} handleClickOnWinner={handleClickOnWinner}/>}
        </div>
    )
}

// 省略connect相关配置(...)

pages/index.js（点击正常页面） #

import React, { useState, useEffect } from 'react';

function Home({ serverRenderedContent }) {
  const [clientRenderedContent, setClientRenderedContent] = useState('');

  useEffect(() => {
    // Fetch additional content on the client side
    fetch('/api/app')
      .then((res) => res.text())
      .then((data) => setClientRenderedContent(data));
  }, []);

  return (
    <div>
      <div>
        <button onClick={() => {alert("It worked")}}>Ola</button>
        <h2>Server-Side Rendered Content (Next.js)</h2>
        <div dangerouslySetInnerHTML={{ __html: serverRenderedContent }} />
      </div>
      <div>
        <h2>Client-Side Rendered Content (Next.js)</h2>
        <div dangerouslySetInnerHTML={{ __html: clientRenderedContent }} />
      </div>
    </div>
  );
}

export async function getServerSideProps() {
  // Fetch server-side rendered content during SSR
  const res = await fetch('http://localhost:3000/api/app');
  const serverRenderedContent = await res.text();

  // Pass data to the page component
  return {
    props: { serverRenderedContent },
  };
}

export default Home;

排查方向及解决步骤 #

1. 检查按钮disabled状态是否误触发 #

按钮设置了disabled={players.length === 0}，如果redux中players数组为空，按钮会被禁用：

• 临时注释掉disabled属性，测试按钮是否能正常点击
• 在组件内打印console.log(players)，确认是否有数据

2. 排查Redux connect配置问题 #

ComponentX使用了connect，省略的部分可能存在状态/方法映射错误：

• 确认setGoBtnVisible是否正确映射为redux action creator，或者是否是父组件传递的props被connect覆盖
• 检查mapStateToProps中players和goBtnVisible的映射是否正确

3. 检查自定义hook的方法是否报错 #

按钮点击同时调用handleClickToStartDraw和handleDrawName，如果handleDrawName内部抛出错误，会阻断整个回调执行：

• 单独调用handleClickToStartDraw测试（修改onClick为onClick={handleClickToStartDraw}），看console是否输出"entrei"
• 在handleDrawName内添加try-catch，捕获可能的错误

4. 确认组件渲染状态 #

检查goBtnVisible初始值：

• 如果goBtnVisible初始为false，按钮根本不会渲染，自然无法点击
• 打印console.log(goBtnVisible)确认初始状态

5. 排查CSS层叠或事件阻止 #

• 检查.gameBtnContainer或.drawBtn的CSS是否有z-index过低、pointer-events: none等属性，导致按钮被遮挡或无法触发事件
• 检查父元素是否存在事件阻止逻辑（如e.stopPropagation()）

内容的提问来源于stack exchange，提问作者Gony