我如何能使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);
当前回答
来晚了，但我试图在TypeScript中完成这个，并想出了这个:
<div onKeyPress={(e: KeyboardEvent<HTMLDivElement>) => console.log(e.key)}
这将打印按到屏幕上的精确键。因此，如果你想在div聚焦时响应所有的“a”键，你可以将e.key与“a”进行比较——字面意思是if(e。Key === "a")。
其他回答
React不会传递给您您可能认为的那种事件。相反，它是传递合成事件。
在一个简短的测试中，事件。keyCode == 0总是true。你需要的是event.charCode
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>
);
}
});
对于我onKeyPress的e.c ycode总是0，但e.c arcode有正确的值。如果使用onKeyDown正确的代码在e.c arcode。
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>
);
}
});
反应键盘事件。
来晚了，但我试图在TypeScript中完成这个，并想出了这个:
<div onKeyPress={(e: KeyboardEvent<HTMLDivElement>) => 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} />
/>
希望这能帮助到一些人。：）
