I have prepared the following React Component (React version 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>
);
}
});myEventHandler function as "evt" passes Proxy object that contain "target" (basically an input) and handler:
Proxy { <target>: Object, <handler>: Object }
I am no sure why, but it seems to behave like "submit" (??) Anyways, from what I've read react should pass standard event object, but it doesn't.
What can cause this kind of behaviour?
This is the expected behaviour. React doesn't use native events to work out browser inconsistencies and uses SyntheticEvents. Something looks weird though. IIRC classname is SyntheticEvent, not Proxy.