如何在控制台查看React onKeyPress事件的e.key与e.target

嘿，这个场景太常见了！React现在用Proxy包装了合成事件对象（SyntheticEvent），所以你直接console.log(e)会看到Proxy结构，直接展开确实找不到e.key、e.target这些属性。给你几个实用的解决办法：

• 直接打印目标属性：不用纠结整个事件对象，在addTodo里直接打印你需要的属性就行，简单直接：

  addTodo(e) {
    console.log('按下的键:', e.key);
    console.log('触发元素:', e.target);
  }
  

• 调用e.persist()保留事件对象：React的合成事件默认会在回调结束后被回收复用，调用persist()可以让事件对象脱离事件池，这样再打印整个e就能在展开的对象里找到所有属性了：

  addTodo(e) {
    e.persist();
    console.log(e);
    // 现在展开Proxy的[[Target]]就能看到完整的SyntheticKeyboardEvent，里面包含key、target等属性
  }
  

• 解构属性后传递：如果只需要特定属性，也可以在事件回调里先解构出来，再传给addTodo，这样后续查看更清晰：

  onKeyPress={(e) => {
    if (e.key === 'Enter') {
      const { key, target } = e;
      this.addTodo({ key, target });
    }
  }}
  
  // 然后在addTodo里打印
  addTodo(eventData) {
    console.log(eventData);
  }
  

其实本质是React为了性能优化，用事件池复用合成事件对象，Proxy是用来做属性访问拦截的，只要用上面的方法，就能轻松拿到你需要的属性啦～

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