React中onClick事件的keyCode返回undefined，问题原因咨询

你遇到的这个问题本质是不同事件类型的设计目标和携带的事件数据完全不同，具体原因可以拆解成这两点：

• onClick属于鼠标/触摸类事件，它的触发逻辑是用户完成一次完整的点击操作（按下+抬起鼠标/触摸），对应的事件对象是MouseEvent或PointerEvent。这类事件的核心是捕获点击行为，根本就没有设计keyCode这类键盘相关的属性，所以你在handleClick里打印e.keyCode只会得到undefined。
• 而keypress/keydown是专门的键盘事件，对应的事件对象是KeyboardEvent，这类事件就是为了捕获键盘操作而生的，所以会携带keyCode、key、code等和按键相关的属性，自然能检测到按下的按键。

举个例子，你提供的这段代码：

class App extends React.Component {
  handleClick = e => {
    console.log(e.keyCode);
  };
  render() {
    return <h1 onClick={this.handleClick}>Hello CodeSandbox</h1>;
  }
}

这里的e是鼠标事件对象，本身就没有keyCode属性，所以打印结果肯定是无效的。如果需要在交互时同时检测键盘按键，你可以考虑监听键盘事件的同时判断目标元素的焦点状态，而不是试图从onClick事件里获取键盘数据。

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