Question

我准备了以下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”传递包含“target”（基本上是输入）和处理程序的代理对象：

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

我不知道为什么，但它似乎表现得像“提交”（??）无论如何，从我所读到的反应应该通过标准事件对象，但事实并非如此。

是什么导致这种行为？

Answer 1

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

React Component将Proxy对象而不是Event对象传递给处理函数

1 个答案: