为什么我的React类中的onClick无法正常工作

Question

以下是我的React组件

var NavHead = React.createClass({

    getInitialState: function() {
        return { in: 0};
    },

    handleClicking: function(event){
        var text=0;
        console.log(this.state.in);
    },


    render: function(){
        return(

            <div className="navbar-header">
                <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span className="sr-only">Toggle navigation</span>
                        <span className="icon-bar"></span>
                        <span className="icon-bar"></span>
                        <span className="icon-bar"></span>
                </button>
                <a className="navbar-brand" href={this.props.url} >
                    <img src={this.props.img_src} alt="tm-logo" onClick={this.handleClicking}/>
                </a>

            </div>

        );
    }
});

但是，当我单击徽标时，没有任何反应。 我的代码有什么问题吗？

有关更多信息，我的文件中有20多个组件。 我试图将onClick处理程序复制粘贴到每个组件，发现只有1个组件可以工作。 以下是该组件。

var NavBarMenu = React.createClass({
    getInitialState: function() {
        return { itemClick: 0};
    },

    handleClick: function(event) {
       console.log(this.state.itemClick)
       this.setState({itemClick: event.currentTarget.dataset.id});
    },


    render: function(){


        return(

            <ul className="nav navbar-nav navbar-menu">
                {this.props.data.map(function(object, i){

                    return  <li onClick={this.handleClick} data-id={i} className={this.state.itemClick==i?"active":""}><a href={object.url}>{object.name}</a></li>;
                },this)}
            </ul>

        );
    }

});

Answer 1

我认为您的JavaScript引擎在第一种情况下正在优化您的代码，因为它只在做console.log。 在第二种情况下，状态被突变，因此代码保持不变。

Answer 2

我试图运行您的代码，并遇到相同的问题。 我通过更改所需的react js文件的顺序来修复它。 在react.js之前包含了react-dom.js库

类似于：

    <script src="react.js"></script>
    <script src="react-dom.js"></script>

关键是react-dom.js应该在react.js之后。