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

这就是你要找的东西吗？

拦截ReactJS合成keydown处理程序

1 个答案: