我如何能使onKeyPress事件工作在ReactJS?当按下回车键(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);
当前回答
如果你想把一个动态参数传递给一个函数，在一个动态输入中::
<Input
onKeyPress={(event) => {
if (event.key === "Enter") {
this.doSearch(data.searchParam)
}
}}
placeholder={data.placeholderText} />
/>
希望这能帮助到一些人。：）
其他回答
除了onKeyPress被弃用之外，我认为onKeyUp是一个比onKeyDown更好的选择，因为它直到键被释放才被执行
<Element
onKeyUp={(e) => {
if (e.key === "Enter") console.log('Enter has press);
}}
/>
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>
);
}
});
render: function(){
return(
<div>
<input type="text" id="one" onKeyDown={this.add} />
</div>
);
}
onKeyDown检测keyCode事件。
有一些挑战，当涉及到按键事件。Jan Wolter关于关键事件的文章有点老了，但很好地解释了为什么关键事件检测很难。
有几件事需要注意:
keyCode，其中，charCode有不同的值/含义在按键从keyup和keydown。它们都被弃用了，但在主流浏览器中是受支持的。 操作系统、物理键盘、浏览器(版本)都可能对键代码/值产生影响。 密钥和代码是最新的标准。但是，在撰写本文时，浏览器还没有很好地支持它们。
为了在react应用程序中处理键盘事件，我实现了react-keyboard-event-handler。请看一看。
你需要调用event.persist();这个方法在你的keyPress事件上。 例子:
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>
)
}
如果你现在在keyboardEvents函数中输入console.log(event)，你会得到其他属性，比如:
keyCode // number
charCode // number
shiftKey // boolean
ctrlKey // boolean
altKey // boolean
还有很多其他属性
谢谢和问候
p.s.: React版本:16.13.1
