javascript - ReactJS onClick 不起作用 - 浏览器和系统控制台中没有任何反应

Question

我已经阅读了很多有关此问题的帖子，但仍然无法解决它。

/** @jsx React.DOM */

var React = require('react/addons');

var SegmentComponent = React.createClass({

    handleThatEvent: function (e)
    {
        console.log('clicked');
    },

    render: function ()
    {
        const styles = {
            left: this.props.leftPercent + '%',
            width: this.props.widthPercent + '%'
        };

        if (this.props.color !== undefined)
        {
            styles.backgroundColor = this.props.color;
        }

        return (
            <span onClick={this.handleThatEvent()} style={styles} className="track-notation"></span>
        )
    }
});

module.exports = SegmentComponent;

当我点击span时，什么也没有发生。我是 ReactJS 的新手，所以也许我错过了一件明显的事情。

网络浏览器控制台和系统控制台(终端)中没有“单击”文本。

编辑:

我尝试过

onClick={this.handleThatEvent.bind(this)}

和

{() => this.handleThatEvent()}

仍然什么都没有。

此外，在 HTML 中，span 元素中没有 onClick 属性:

<span style="left:10%;width:10%;" class="track-notation" data-reactid=".rru3h8zkm2.1:0.0.2.0"></span>

Answer 1

 onClick={this.handleThatEvent()} 

替换为

  onClick={this.handleThatEvent}