Javascript 在不使用JSX编译器的情况下添加函数

我只是想问一下，如果不在react中使用JSX编译器，如何添加click事件。现在，我的事件未执行，事件未附加到elemant

/** @jsx React.DOM */
var MYCOMPONENT = React.createClass({
    displayName: 'MYCOMPONENT',
    handleClick: function (e) {
        console.log('You clicked');
    },
    render: function (){     
        var listUser = this.props.data.map(function(item){

                return(
                    React.DOM.div(
                        {
                            className: 'panel panel-default staff-reception ' + item.statusType.toLocaleLowerCase() + 'Office',
                            'ng-click': 'showUserDetails(user)',
                            onClick: this.handleClick
                        },
                React.DOM.div({ className: 'panel-body' },React.DOM.span(null, item.firstName + ' ' + item.lastName + ' ' + item.directDial + ' Ext:' + item.voiceMailExt)
             )
             )
             );
        });

        return (React.DOM.div({className:'col-xs-12 col-md-6 col-lg-4'}, listUser));
    }
});

---

您的问题可能与

绑定有关。在
map
功能中：

var listUser = this.props.data.map(function(item){
  // ...
    onClick: this.handleClick
  // ...
});

此
不再绑定到组件实例，因此
此.handleClick
是
未定义的
。允许您在函数内指定此

的值：

var listUser = this.props.data.map(function(item){
  // ...
    onClick: this.handleClick
  // ...
});

如果为映射提供了一个

thisArg

参数，那么在调用时它将被传递到回调，用作它的

this

值。否则，值

未定义

将被传递用作其

此

值

因此，将组件实例指定为

thisArg

参数：

var listUser = this.props.data.map(function(item){
  // ...
    onClick: this.handleClick
  // ...
}, this);

---

下面是一个JSFIDLE，它使用您的代码（但添加了

thisArg

来演示：

为什么不在组件中使用合成事件？怎么了？你能告诉我怎么做吗？我使用JSX的问题不是asp.net友好型的？我不知道asp.new。实际上，你可以使用react工具将JSX代码编译成JavaScrips。JSX不需要利用react中的合成事件系统。