我如何能使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);
当前回答
你需要调用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
其他回答
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>
);
}
});
Keypress事件已弃用，您应该使用Keydown事件代替。
https://developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event
handleKeyDown(event) {
if(event.keyCode === 13) {
console.log('Enter key pressed')
}
}
render() {
return <input type="text" onKeyDown={this.handleKeyDown} />
}
对于我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>
);
}
});
反应键盘事件。
我正在使用React 0.14.7，使用onKeyPress和事件。钥匙工作得很好。
handleKeyPress = (event) => {
if(event.key === 'Enter'){
console.log('enter press here! ')
}
}
render: function(){
return(
<div>
<input type="text" id="one" onKeyPress={this.handleKeyPress} />
</div>
);
}
除了onKeyPress被弃用之外，我认为onKeyUp是一个比onKeyDown更好的选择，因为它直到键被释放才被执行
<Element
onKeyUp={(e) => {
if (e.key === "Enter") console.log('Enter has press);
}}
/>
