为什么我的 React class 中的 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

我试过运行你的代码，和运行成同样的问题。我通过更改所需的反应 js 文件的顺序来修复它。在 react.js

之前包含了 react-dom.js 库

类似于：

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

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

为什么我的 React class 中的 onClick 不起作用

Why onClick in my React class is not working

javascript

jsx

reactjs