перехват ReactJS синтетический keydown обработчик

Question

Я понимаю, что React реализует собственную систему делегирования событий для событий keydown, keyup и keypress.

Что бы я хотел сделать, это ввести собственный обработчик keydown для всего приложения при запуске, который перехватывает синтетические события keydown до того, как они достигнут какого-либо компонента. Например, мой обработанный обработчик keydown может обнаруживать и использовать определенные комбинации клавиш, которые я могу использовать для генерации пользовательских событий отладки. Я специально хочу избежать необходимости обнаруживать такие события в обработчике ключевых компонентов.

Возможно ли это, и если да, может ли кто-нибудь указать мне на гида?

Answer 1

Возможно, это не так сложно, как вы думаете? или, если я не пойму это неправильно, вы можете просто использовать document.addEventListener в своем app.js (который является верхним уровнем ваших компонентов).

Вот отрывок:

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

это то, что вы ищете?