Reactjs 截获合成键控处理程序

Reactjs 截获合成键控处理程序,reactjs,Reactjs,我知道React为keydown、keyup和keypress事件实现了自己的事件委派系统 我想做的是在启动时注入我自己的应用程序范围的keydown处理程序,在合成keydown事件到达任何组件之前拦截它们。例如,我的注入式keydown处理程序可能会检测并使用我可以用来发出自定义调试事件的某些键组合。我特别希望避免在组件密钥处理程序中检测此类事件 这可能吗?如果可能的话,有人能给我指一个向导吗 也许这没有你想象的那么复杂?或者,除非我理解错误,否则您可以在app.js中使用document.

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

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


这可能吗?如果可能的话,有人能给我指一个向导吗

也许这没有你想象的那么复杂?或者,除非我理解错误,否则您可以在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'));
var Comp1=React.createClass({
_handleKeyDown:功能(e){
console.clear();
console.log(如target.value);
},
render:function(){
返回(
你的名字:
);
}
});
var Comp2=React.createClass({
render:function(){
返回(
这是组件2
);
}
});
var Main=React.createClass({
componentDidMount:function(){
文件。添加了监听器(“键控”,this.\u handleKeyDown);
},
_handleKeyDown:函数(e){
console.log('keydown from main');
},
render:function(){
返回(
);
}
});
React.render(,document.getElementById('app'));
以下是jsbin链接:


这就是您想要的吗?

我仍然想利用React的关键活动授权。您的方法不只是添加一个单独的keydown侦听器吗?那么您希望将keydown处理程序附加到何处/什么位置呢?React已经添加了自己的keydown处理程序来处理事件委派。我想通过与React one接口的EventPluginHub注入我自己的keydown处理程序。