ReactJS onClick无法正常工作 - 浏览器和系统控制台中没有任何问题

时间:2017-01-21 11:50:20

标签: javascript reactjs events onclick

我已经阅读了很多关于这个问题的帖子,但我还是无法修复它。

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

3 个答案:

答案 0 :(得分:1)

 onClick={this.handleThatEvent()} 

替换为

  onClick={this.handleThatEvent} 

答案 1 :(得分:1)

小心您已将this.handleThatEvent()传递到onClick事件,并在那里执行,您需要只传递this.handleThatEvent上的onClick函数执行它。 ..见:

&#13;
&#13;
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;
&#13;
&#13;

答案 2 :(得分:0)

这就是问题所在:

onClick={this.handleThatEvent()}

应该是这样的:

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

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