我已经阅读了很多关于这个问题的帖子,但我还是无法修复它。
/** @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的新手,所以也许我错过了一件明显的事情。
Web浏览器控制台和系统控制台(终端)中没有“单击”文本。
修改
我试过
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>
答案 0 :(得分:1)
onClick={this.handleThatEvent()}
替换为
onClick={this.handleThatEvent}
答案 1 :(得分:1)
小心您已将this.handleThatEvent()
传递到onClick
事件,并在那里执行,您需要只传递this.handleThatEvent
上的onClick
函数执行它。 ..见:
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')
)
&#13;
<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>
&#13;
答案 2 :(得分:0)
这就是问题所在:
onClick={this.handleThatEvent()}
应该是这样的:
onClick={this.handleThatEvent.bind(this)}
或
onClick={() => this.handleThatEvent()}