ReactJS onClickが動作しません - ブラウザとシステムコンソールで何も起こりません

Question

この問題について多くのスレッドを読んだことがありますが、修正できません。私は何もhappendsないスパンをクリックしてください

/** @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; 

。私はReactJSで新しく、多分私は明白なことを逃した。

ウェブブラウザのコンソールとシステムコンソール（端末）に「クリックされた」テキストはありません。

EDIT：

私は

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

と

{() => this.handleThatEvent()} 

で試しても何もありません。また

HTMLでのonClick span要素であっ属性ではありません。

onClick={this.handleThatEvent()} 

は、そのようにする必要があります：問題です

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

Answer 1

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

または

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

Answer 2

onClick={this.handleThatEvent()} 

置き換える

onClick={this.handleThatEvent} 

Answer 3

慎重にあなたはonClickイベントにthis.handleThatEvent()を通過し、そして、あなたが参照してください...それを実行しますonClickにのみ機能this.handleThatEventを渡す必要があり、それを実行しました：

const 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" 
 
     >Click me! 
 
     </span> 
 
    ) 
 
    } 
 
}); 
 

 
ReactDOM.render(
 
    <SegmentComponent />, 
 
    document.getElementById('root') 
 
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>