React.js状态变量不会在悬停时更新

Question

我正在使用状态变量来跟踪图标是否已悬停。 变量未更新。 状态变量的Console.log也不起作用（控制台中未显示）

Icons = React.createClass({

    getInitialState: function() {
        return { icon_id: 0};
        console.log(icon_id);
    },

    onHover: function(event) {
        this.setState({ icon_id: event.currentTarget.dataset.id });
        console.log(icon_id);
    },

    render: function() {

        return (

        <ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionLeave={true} transitionEnterTimeout={600} transitionAppearTimeout={600} transitionLeaveTimeout={300}>


                    <ul className="someclass">{ iconslist.map(function(i){
                            return <li key={i.id}><a href={i.url} target="_blank"><span className={i.class} id={i.id} data-id={i.data} onMouseOver={this.onHover}></span></a></li>

                        }) }

                    </ul>
                    <p className="icon-text">{iconslist[this.state.icon_id].name}</p>


        </ReactCSSTransitionGroup>

        );

    }

});

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

var iconslist = [

    { data: '0', url: 'mailto:******', id: 'lightbulb', class: 'fa fa-lightbulb-o fa-5x', name: 'Thoughts'},
    { data: '1', url: 'mailto:******', id: 'gears', class: 'fa fa-gears fa-5x', name: 'ML'},
];

Answer 1

您应该按以下方式访问任何状态变量：

var iconid = this.state.icon_id;
console.log(iconid);

Answer 2

setState方法不会立即更新类的状态。 所以setState方法还接受了一个回调，该回调在react更新状态后被调用- 官方文档

因此，在您的代码中，您必须执行以下操作：

onHover: function(event) {
    this.setState({ 
      icon_id: event.currentTarget.dataset.id 
    }, () => console.log(icon_id));
},

Answer 3

您需要稍微更改代码。 您必须绑定此方法，因为它不知道该方法。 看看我改变了什么。

      getInitialState: function() {
        return { icon_id: 0};
        console.log(icon_id);
    },

    onHover = (event) => {
        this.setState({ icon_id: event.currentTarget.dataset.id });
        console.log(icon_id);
    },

    render: function() {

        return (

        <ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionLeave={true} transitionEnterTimeout={600} transitionAppearTimeout={600} transitionLeaveTimeout={300}>


                    <ul className="someclass">{ iconslist.map(function(i){
                            return <li key={i.id}><a href={i.url} target="_blank"><span className={i.class} id={i.id} data-id={i.data} onMouseOver={() => this.onHover()}></span></a></li>

                        }) }

                    </ul>
                    <p className="icon-text">{iconslist[this.state.icon_id].name}</p>


        </ReactCSSTransitionGroup>

        );

如果使用箭头功能，则不需要绑定功能。

Answer 4

这些答案均不正确。 我想到了。

我不得不在渲染函数中使用“函数”一词，而不必使用：

<ul className="icons">{ iconslist.map((i) => {
                            return (
                            <li key={i.id}>
                                <span className={i.class} 
                                    id={i.id} 
                                    data-id={i.data} 
                                    onMouseOver={this.onHover}>
                                </span>
                            </li>
                            )
                        }) }

                    </ul>

在map函数中使用（i）=>是什么。

此线程中没有其他人可以喝的汤。