Reputation: 936
I' trying to listen for keyboard events in ReactJS like this:
class Dungeon extends React.Component {
onKeyPress(e){
console.log(e.charCode);
}
render(){
var rows = [];
for (var i=0; i < boardHeight; i++) {
rows.push(<DungeonRow rowId={i} />);
}
return (
<table onKeyPress={this.onKeyPress}>
{rows}
</table>
);
}
}
But the onKeyPress
is not called when I click on the keyboard. What went wrong?
Upvotes: 2
Views: 3233
Reputation: 830
Did you bind your function ?
If not change the definition to
onKeyPress=(e)=>{
console.log(e.charCode);
}
Upvotes: 0
Reputation: 6432
You can use JSX "onKeyDown" to detect key codes:
https://jsfiddle.net/pablodarde/bg8sek2r/
HTML
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
CSS
table td {
border: 1px solid red;
}
React Code
class Dungeon extends React.Component {
constructor(props) {
super(props);
this.inputListener = this.inputListener.bind(this);
}
inputListener(event) {
const key = event.keyCode;
if (key === 40) {
alert("Arrow down pressed!");
}
}
render() {
return(
<div>
<ol>
<li>Click in this area</li>
<li>Press TAB to select the table</li>
<li>Press ARROW DOWN</li>
</ol>
<table tabIndex="0" onKeyDown={this.inputListener} ref={(elem) => { this.tbl = elem; }}>
<tr>
<td>column A</td>
<td>column B</td>
</tr>
</table>
</div>
)
}
}
React.render(<Dungeon />, document.getElementById('container'));
Upvotes: 4