He preparado el siguiente componente React (React versión 1.5.2):
var QuickSearch = React.createClass({ searchHandler: function(){ this.props.parent.props.dataSource.search = this.refs.SearchInput.value; this.props.parent.props.dataSource.setPage(1); this.props.parent.getData(); }, refreshHandler: function(){ this.props.parent.props.dataSource.search = this.refs.SearchInput.value; this.props.parent.getData(); }, myEventHandler: function(evt){ console.log(evt); if(evt.keyCode === 13) { evt.stopPropagation(); this.searchHandler(); } }, render: function(){ /* Translation function from table model */ _ = this.props.parent.props.table_model.gettrans; return( <div className="reactable-quicksearch-wrapper"> <input ref="SearchInput" type="text" onKeyPress={this.myEventHandler} placeholder={_('Search phrase...')} /> <button ref="SearchButton" type="button" onClick={this.searchHandler}>{_('Search')}</button> <button ref="RefreshButton" type="button" onClick={this.refreshHandler}>{_('Refresh')}</button> </div> ); } });La función myEventHandler como "evt" pasa el objeto Proxy que contiene "objetivo" (básicamente una entrada) y el controlador:
Proxy { <target>: Object, <handler>: Object }No estoy seguro de por qué, pero parece comportarse como "enviar" (??) De todos modos, por lo que he leído, reaccionar debería pasar el objeto de evento estándar, pero no lo hace.
¿Qué puede causar este tipo de comportamiento?
Este es el comportamiento esperado. React no usa eventos nativos para resolver las inconsistencias del navegador y usa SyntheticEvent s. Aunque algo se ve raro. El nombre de clase de IIRC es SyntheticEvent, no Proxy.