如何使用React在页面显示按键键值 现有代码报错如何解决

• onKeyPress方法没有绑定组件实例的this指向，事件触发时方法内的this为undefined，所以尝试操作this.state就会抛出类型错误。
• React类组件中不允许直接修改state的值，必须调用this.setState()方法更新状态，否则状态变更不会触发视图重新渲染。

你可以选择任意一种方式绑定this，同时修改状态更新逻辑即可：

方案1：在constructor中绑定this #

constructor(props){
  super(props);
  this.state = {
    count: 0
  };
  // 绑定this到组件实例
  this.onKeyPress = this.onKeyPress.bind(this);
}

onKeyPress(event){
  console.log(event.keyCode);
  // 用setState更新状态
  this.setState({
    count: event.keyCode
  });
}

方案2：用箭头函数定义类方法（更简洁） #

直接把onKeyPress改成箭头函数，箭头函数会自动继承外层上下文的this：

onKeyPress = (event) => {
  console.log(event.keyCode);
  this.setState({
    count: event.keyCode
  });
}

event.keyCode已经被W3C标记为废弃属性，如果你需要更规范的实现，可以替换为event.key（显示按键字符，比如按a就返回'a'，按回车返回'Enter'）或者event.code（返回物理按键编码，比如按左侧Shift返回'ShiftLeft'）。

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