React Component将Proxy对象而不是Event对象传递给处理函数 [英] React Component passes Proxy object instead of Event object to the handler function

问题描述

我准备了以下React组件(React版本1.5.2):

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函数作为"evt"传递包含目标"(基本上是输入)和处理程序的代理对象:

myEventHandler function as "evt" passes Proxy object that contain "target" (basically an input) and handler:

Proxy { <target>: Object, <handler>: Object }

我不确定为什么，但是它的行为似乎像提交"(??)一样，无论如何，从我阅读的内容来看，react应该传递标准的事件对象，但事实并非如此.

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.

什么会导致这种行为?

推荐答案

这是预期的行为. React不使用本机事件来解决浏览器不一致问题，而是使用 SyntheticEvent .看起来有些奇怪. IIRC类名是SyntheticEvent，而不是Proxy.

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.

这篇关于React Component将Proxy对象而不是Event对象传递给处理函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！