Hijack React handler function

Question

Я пытаюсь захватить все обработчики кнопок из глобального метода и вручную запускать обработчик, если выполняется определенное условие. Простой пример здесь: http://jsfiddle.net/zvy80mpf/

var clickHandler = function(e) { 
    console.log(e.target); // Button 
    // I want to hijack the component handler here and trigger it manually 
} 

var Hello = React.createClass({ 
    handler: function() { 
     console.log('component onclick'); 
    }, 
    render: function() { 
     return (
      <div onClick={this.props.clickHandler}> 
       <button handler={this.handler}>Hello</button> 
      </div> 
     ); 
    } 
}); 

React.renderComponent(<Hello clickHandler={clickHandler} />, document.body); 

Я знаю, что я могу передать функцию handler, но я хочу, чтобы получить доступ обработчиков из глобального контекста, без изменения внутренних компонентов.

В jQuery вы можете сделать это с помощью $._data(element, 'events'), есть ли аналогичный способ в React?

Answer 1

если вы свяжете свою Gobal обработчик «это» в компоненте, вы должны быть в состоянии вызвать компонент CLICK-обработчик из глобальной функции, например:

var clickHandler = function(e) { 
    console.log(e.target); // Button 
    // Hijack the component onClick here 
    this.handler(); 
} 

var Hello = React.createClass({ 
    handler: function() { 
     console.log('component onclick'); 
    }, 
    render: function() { 
     return (
      <div onClick={this.props.clickHandler.bind(this)}> 
       <button handler={this.onClick}>Hello</button> 
      </div> 
     ); 
    } 
}); 

React.renderComponent(<Hello clickHandler={clickHandler} />, document.body); 

Answer 2

Я не уверен в полностью понимаете, о чем вы просите, но ...

Существует недокументированный способ в Реаге передать данные в целую иерархию подкомпонентов.

Вы можете для Exemple использовать следующее:

React.withContext({handler: handler},function() { 
     React.renderComponent(
      self.mountComponent(props), 
      self.mountNode 
     ); 
    }); 

И тогда вы можете получить доступ к обработчику во всех подкомпонентов с Mixin как:

var WithHandlerMixin = { 
    contextTypes: { 
     handler: React.PropTypes.func.isRequired 
    }, 
    getHandler(): function() { 
     return this.context.handler; 
    } 
}; 

Это документированы, поскольку она считается нестабильным командой React и могут иметь некоторые ошибки. Но, по моему опыту, использование простого кода, подобного этому, прекрасно работает и уже без каких-либо проблем используется некоторыми популярными фреймами React, такими как Fluxxor. Просто имейте в виду, что подписи могут измениться, но команда React сообщила мне, что эта функция не будет удалена.

Однако вы должны изменить все компоненты, получающие доступ к этому обработчику, но смешение не настолько навязчивое, я думаю.