NextJS自定义组件onClick失效：按钮点击无响应原因排查

1. 组件未传递onClick事件到原生按钮 #

你的MyButton组件接收了onClick参数，但没有把它绑定到内部的原生<button>元素上，导致点击事件无法触发。

修复组件代码： #

interface Button{
   text: string
   onClick?: () => void
}

const MyButton = ({ text, onClick }: Button) => {
   return (
      <button onClick={onClick}>
        {text}
      </button>
  )
}

export default MyButton;

2. 调用组件时的拼写错误 #

页面里定义的函数是doStuff，但调用组件时写成了dostuff（大小写不一致），导致传递了一个不存在的函数，无法执行预期逻辑。

3. 组件调用标签未闭合 #

页面中<Button text="Foo" onClick={dostuff}缺少闭合的/>或</Button>，会导致React渲染出错。

修复页面代码： #

import MyButton from './Button';

const Page= () => {

  const doStuff = () => {
    console.log('do anything')
  }

   return(
     <div>
       <MyButton text="Foo" onClick={doStuff} />
     </div>       
   )
}

export default Page

额外注意：组件命名为MyButton，但页面调用时写的是Button，要保证导入和使用的组件名称一致，也可以在组件导出时改名（比如export default MyButton as Button）。

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