React入门求助：OnClick事件无法调用函数

核心问题分析 #

你的代码无语法报错，但点击按钮后控制台无输出，大概率是this上下文丢失或组件内部状态访问异常导致函数执行中断。

具体排查与修复步骤 #

1. 修复checkChoice方法的this绑定问题 #

类组件中的普通方法默认不会绑定组件实例，当你通过箭头函数调用this.checkChoice(colour)时，外层this虽正确，但checkChoice内部的this会变成undefined（严格模式下），导致无法访问this.state，函数执行到这一步就会静默失败。

修复方式二选一：

• 方式一：在构造函数中绑定this

constructor(props) {
  super(props);
  // 绑定方法到组件实例
  this.checkChoice = this.checkChoice.bind(this);
}

• 方式二：将方法定义为箭头函数（推荐）

checkChoice = (col) => {
  const { correctIndex, colours } = this.state;
  const newMessage = col === colours[correctIndex] ? 'Correct!' : 'Wrong!';
  console.log(newMessage);
}

2. 验证自定义Button组件的事件传递 #

取消自定义Button组件中注释的console.log(onClick)代码，确认父组件传递的onClick函数是否被正确接收：

const Button = ({ onClick, className = '', children }) => {
  console.log('Received onClick function:', onClick); // 打开这行日志
  return (
    <button
      onClick={onClick}
      className={className}
      type="button"
    >
      {children}
    </button>
  );
}

如果控制台能打印出函数，说明事件传递正常；如果打印undefined，检查父组件中colours是否存在、是否正确渲染了Button组件。

3. 检查状态值的合法性 #

• 确认this.state.correctIndex在colours数组的索引范围内，避免colours[correctIndex]返回undefined；
• 将判断条件中的==改为严格相等===，避免类型隐式转换导致的判断错误。

4. 排查元素遮挡问题 #

在浏览器开发者工具中检查按钮元素：

• 查看按钮的pointer-events样式是否为none，如果是则改为auto；
• 确认没有其他元素（如透明遮罩层）覆盖在按钮上方，导致点击事件无法触发。

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