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?