ReactJS中获取按钮点击事件keyCode问题求助

嘿，很高兴你已经通过浏览器测试解决了这个问题！我来梳理下你代码里可能遇到的问题点，以及关于事件对象和keyCode的注意事项，方便你后续开发参考：

首先看你的原始代码，myButtonClicked作为按钮的onClick回调，正常情况下React会自动把合成事件对象传递给它，但你提到曾经遇到e返回undefined，大概率是这两个原因之一：

• 不小心写成了onClick={myButtonClicked()}（直接执行函数而非传递引用），但你的代码里是正确的onClick={myButtonClicked}，所以更可能是React事件池的影响——不过同步打印的话其实不需要e.persist()，只有在异步操作中需要保留事件对象时才用得到。
• 另外要注意：click事件本身没有keyCode属性！ 你想获取的keyCode是键盘事件（比如keydown、keyup）专属的属性，所以在click事件里打印e.keyCode本来就会是undefined，这可能是你误解的点~

这里给你调整后的代码，加上关键注释：

class App extends React.Component {
  render() {
    return (
      <div>
        <MyButton />
      </div>
    );
  }
}

function myButtonClicked(e) {
  // 只有当你需要在异步操作（比如setTimeout）里访问e时，才需要调用e.persist()
  // e.persist(); 
  console.log('事件对象：', e);
  console.log('当前上下文this：', this);
  
  // 重点：click事件没有keyCode，改用键盘事件才能获取按键信息
  // 如果要监听按键，示例：
  // document.addEventListener('keydown', (keyEvent) => {
  //   console.log('按键编码：', keyEvent.keyCode);
  //   console.log('按键名称：', keyEvent.key); // 推荐用key，keyCode已废弃
  // });
}

function MyButton() {
  return (
    <div>
      <button onClick={myButtonClicked}>Click 1</button>
    </div>
  );
}

// 注意：React 18+ 改用createRoot，旧版本用ReactDOM.render
ReactDOM.render(<App />, document.getElementById('root'));

额外小提示： #

如果你的事件处理函数需要正确的this上下文（比如访问组件的state或props），可以用这两种方式绑定：

• 箭头函数包裹：<button onClick={(e) => myButtonClicked(e)}>Click 1</button>
• bind绑定：<button onClick={myButtonClicked.bind(this)}>Click 1</button>

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