ReactJS.NET:无法触发点击事件

ReactJS.NET : Unable to get click events to fire

我 运行 ReactJS.NET 使用 ASP.NET MVC,一切都呈现良好,除了...我无法触发任何类型的事件...

我试过的:

1) 消除所有JQuery references/usages - 没有成功

2) onHover、onClick,具有 React 组件内部和外部的功能 - 没有成功

这是我的代码:

在 index.cshtml

中附加 ProductLine React 组件
@Html.React("ProductLine", Model)

React 组件

function addToCart() {
alert("Hoohohoho!!!");
};

var ProductLine = React.createClass({
    render: function () {
        return(
            <div className="col-md-12 col-sm-12 col-xs-12" key={this.props.productData.name}>
                <button onClick={this.addToCart}>Click me!</button>
                <div className="row" >
                    <div onClick={addToCart} className="col-md-12 col-sm-12 col-xs-12 nopadding row-default" >
                        <div className="col-md-3 col-sm-5 col-xs-5 nopadding">
                            <span className="table table-col ">
                                <input type="checkbox" id="cbxCheck2" className="jq_select_product" />
                                <label htmlFor="cbxCheck2" className="jq_select_product">{ this.props.productData.name }</label>
                            </span>
                        </div>
                        <div className="col-md-4 hidden-sm hidden-xs nopadding">
                            <span className="table table-col table-text-small">
                                { this.props.productData.label }
                            </span>
                        </div>
                        <div className="col-md-3 col-sm-4 col-xs-4 nopadding">
                            <span className="table table-col">
                                849,- (12 mnd)
                            </span>
                        </div>
                        <div className="col-md-2 col-sm-3 col-xs-3 nopadding">
                            <span className="table table-col table-text-small text-right">
                                <img id="imgShowMore" src="../../Images/arrow_purple_down.png" className="show-more _icon jq_expand_listview" /><label className="show-more _lbl jq_expand_listview">Vis mer</label>
                            </span>
                        </div>
                    </div>
                    <ProductDetails productData={this.props.productData} />
                </div>
            </div>
        );
    },
    addToCart: function (e) {
        alert("Hooooo!!!");
    },
});

经过 1/2 天的反复试验,我突然尝试将所有 JSX 文件引用放在 _Layout.cshtml 页面的底部...

这实际上解决了所有问题...