react.js中的键绑定

Question

试图在react.js中实现键绑定.做了一些研究,但仍然想知道什么是最干净的方法.例如,

if (event.keyCode == 13 /*enter*/) {
  function()
}
if (event.keyCode == 27 /*esc*/) {
  anotherfunction()
}

Answer 1

当组件安装和卸载时,我最终绑定了keydown事件:

...

componentDidMount: function() {
  $(document.body).on('keydown', this.handleKeyDown);
},

componentWillUnMount: function() {
  $(document.body).off('keydown', this.handleKeyDown);
},

handleKeyDown: function(event) {
  if (event.keyCode == 13 /*enter*/) {
    this.okAction();
  }
  if (event.keyCode == 27 /*esc*/) {
    this.cancelAction();
  }
},

render: function() {
  return this.state.showDialog ? (
    <div className="dialog" onKeyDown={this.handleKeyDown}>

...

可能有更好的方法来做到这一点.该函数用作对话框组件的一部分:https://github.com/changey/react-dialog