Javascript 如何在ReactJS中处理“onKeyPress”事件？

如何使onKeyPress事件在ReactJS中工作？当按下enter（keyCode=13）时，它应发出警报

var Test = React.createClass({
    add: function(event){
        if(event.keyCode == 13){
            alert('Adding....');
        }
    },
    render: function(){
        return(
            <div>
                <input type="text" id="one" onKeyPress={this.add} />    
            </div>
        );
    }
});

React.render(<Test />, document.body);

var Test=React.createClass({
添加：功能（事件）{
如果（event.keyCode==13）{
警报（“添加…”）；
}
},
render:function（）{
返回(
);
}
});
React.render（，document.body）；

呈现：函数（）{
返回(
);
}

---

onKeyDown

检测

keyCode

事件

React并没有向您传递您可能认为的事件类型。相反，它正在过去

---

在一个简短的测试中，

event.keyCode==0

始终为真。您需要的是

事件。charCode
对于我
onKeyPress
的
e.keyCode
总是
0
，但是
e.charCode
的值是正确的。如果使用
onKeyDown
则在
e.charCode
中输入正确的代码

var Title = React.createClass({
    handleTest: function(e) {
      if (e.charCode == 13) {
        alert('Enter... (KeyPress, use charCode)');
      }
      if (e.keyCode == 13) {
        alert('Enter... (KeyDown, use keyCode)');
      }
    },
    render: function() {
      return(
        <div>
          <textarea onKeyPress={this.handleTest} />
        </div>
      );
    }
  });

var Title=React.createClass({
手工测试：功能（e）{
如果（e.charCode==13）{
警报（“输入…（按键，使用字符码）”；
}
如果（e.keyCode==13）{
警报（“输入…（按键，使用按键代码）”；
}
},
render:function（）{
返回(
);
}
});


handleKeyPress = (event) => {
  if(event.key === 'Enter'){
    console.log('enter press here! ')
  }
}
render: function(){
     return(
         <div>
           <input type="text" id="one" onKeyPress={this.handleKeyPress} />
        </div>
     );
}

handleKeyPress=（事件）=>{
如果（event.key=='Enter'）{
console.log（'enter-press-here！'）
}
}
render:function（）{
返回(
);
}
晚会迟到了，但我试图用TypeScript完成这项工作，并提出了以下建议：

<div onKeyPress={(e: KeyboardEvent<HTMLDivElement>) => console.log(e.key)}

console.log（e.key）}

这会将按下的按键精确打印到屏幕上。因此，如果您想在div处于焦点时响应所有“a”键的按下，您应该将e.key与“a”进行比较——字面意思是if（e.key==“a”）。
如果您想将动态参数传递给函数，在动态输入中：

<Input 
  onKeyPress={(event) => {
    if (event.key === "Enter") {
      this.doSearch(data.searchParam)
    }
  }}
  placeholder={data.placeholderText} />
/>

{
如果（event.key==“输入”）{
this.doSearch（data.searchParam）
}
}}
占位符={data.placeholder text}/>
/>

希望这对某人有帮助。：）
 在按键事件方面有一些挑战。有点老了，但很好地解释了为什么关键事件检测很困难

需要注意的几点：

keyCode
，
哪个
，
charCode
在按键中的值/含义与keypup和keypdown不同。它们都不推荐使用，但在主要浏览器中都受支持
操作系统、物理键盘、浏览器（版本）都可能对关键代码/值产生影响
key
和
code
是最新的标准。但是，在编写本文时，浏览器并不支持它们
为了解决react应用程序中的键盘事件，我实现了。请看一看。
var Test=React.createClass({
var Test = React.createClass({
     add: function(event){
         if(event.key === 'Enter'){
            alert('Adding....');
         }
     },
     render: function(){
        return(
           <div>
            <input type="text" id="one" onKeyPress={(event) => this.add(event)}/>    
          </div>
        );
     }
});

添加：功能（事件）{
如果（event.key=='Enter'）{
警报（“添加…”）；
}
},
render:function（）{
返回(
this.add（event）}/>
);
}
});
不推荐使用Keypress事件，应改用Keydown事件


handleKeyDown（事件）{
如果（event.keyCode==13）{
console.log（'按Enter键'）
}
}
render（）{
返回
}
您需要调用event.persist（）在按键事件上使用此方法。
例如：

以及许多其他属性

谢谢和问候

附言：React版本：16.13.1
通过访问窗口元素，使用钩子对我有效

useEffect(() => {
    window.addEventListener('keypress', e => {
      console.log(e.key)
    });
  }, []);

因为React将键代码规范化为可读字符串。我建议用这些来代替键码。@RandymorrisReact并不总是正确地规范键码。对于生成“+”将为您提供键代码值187，shiftKey=true，但是“key”值将解析为“Unidentified”。通常情况下，输入键会通过onKeyUp检测到-这允许用户在决定停止交互时停止交互。使用keyPress或keyDown会立即执行…因此，如果您对使用箭头键和/或其他非字母数字键感兴趣，onKeyDown适合您，因为它们不会返回keyChar，而是返回keyCode。对于那些对尝试React keyEvents本身感兴趣的人，这里有一个我创建的。您可以使用：
Simulate.keyPress在测试中模拟它（ReactDOM.findDOMNode（component.refs.input），{key:“Enter”}；
你所说的实验是什么意思？我想用ES6“functionName（param）=>{}”可以吗？@Waltari它是ES6，意思是
函数handleKeyPress（event）{…}
它还绑定了
这个
也许它很迂腐，但值得注意的是，最好使用严格的相等
==
检查
事件。键=='Enter'
。这似乎不起作用。但这并不会影响问题。当按下Enter键时，它不会改变等于13的键。我只是不断地得到答案返回用于
e.key | | e.keyCode | | e.charCode
的合成函数。它还支持
event.key==='Enter'
。请看一看。
handleKeyDown(event) {
    if(event.keyCode === 13) { 
        console.log('Enter key pressed')
  }
}

render() { 
    return <input type="text" onKeyDown={this.handleKeyDown} /> 
}

const MyComponent = (props) => {
   const keyboardEvents = (event) =>{
       event.persist();
       console.log(event.key); // this will return string of key name like 'Enter'
   }
   return(
         <div onKeyPress={keyboardEvents}></div>
   )
}

keyCode // number
charCode // number
shiftKey // boolean
ctrlKey // boolean
altKey // boolean

useEffect(() => {
    window.addEventListener('keypress', e => {
      console.log(e.key)
    });
  }, []);