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处理程序复制粘贴到每个组件，并发现代码只有一个组件可以工作。以下是该组件。

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之后。

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

2 个答案: