我准备了以下React组件(React版本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 函数作为“evt”传递包含“目标”(基本上是输入)和处理程序的代理对象:
Proxy { <target>: Object, <handler>: Object }
我不知道为什么,但它的行为似乎像“提交”(??)无论如何,从我读到的反应应该传递标准事件对象,但它没有。
什么会导致这种行为?
这是预期的行为。 React 不使用本机事件来解决浏览器不一致问题并使用综合事件 https://facebook.github.io/react/docs/events.htmls。不过有些东西看起来很奇怪。 IIRC 类名是 SyntheticEvent,而不是 Proxy。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)