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更新状态后调用 - official documentation

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

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

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

而不是使用＆＃34;功能＆＃34;在渲染函数中的术语，我不得不使用：

<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>

使用（i）=＆gt;在地图功能中是做了什么。

在这个帖子中没有其他任何人喝汤。

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

4 个答案: