截取ReactJS合成按键处理程序

Question

我知道React为keydown、keyup和keypress事件实现了自己的事件委派系统。

我想要做的是在启动时注入我自己的应用程序范围的keydown处理程序，它在合成的keydown事件到达任何组件之前拦截它们。例如，我插入的keydown处理程序可能会检测并使用某些组合键，我可以使用这些组合键来发出自定义调试事件。我特别希望避免在组件键处理程序中检测此类事件。

这有可能吗?如果可能，有人能给我指个指南吗？

Answer 1

也许这并不像你想的那么复杂？或者，除非我理解错误，否则您可以在app.js中使用document.addEventListener (这是您的组件的顶级)。

下面是一段代码：

var Comp1 = React.createClass({
  _handleKeyDown: function(e) {
    console.clear();
    console.log(e.target.value);
  },
  render: function() {
    return (
      <div>
        your name:
        <input type="text" onKeyDown={this._handleKeyDown} />
      </div>
    );
  }
});

var Comp2 = React.createClass({
  render: function() {
    return (
      <div>
        this is component 2
      </div>
    );
  }
});

var Main = React.createClass({
  componentDidMount: function() {
    document.addEventListener("keydown", this._handleKeyDown);
  },
  _handleKeyDown: function(e) {    
    console.log('keydown from main');
  },
  render: function() {
    return (
      <div>
        <Comp1 />
        <Comp2 />
      </div>
    );
  }
});

React.render(<Main />, document.getElementById('app'));

这是jsbin链接：http://jsbin.com/saxocujovu/edit?js,console,output

这就是你要找的吗？