时间戳

首页 > 解决方案 > 如何获取元素的当前状态以响应渲染进度条？

reactjs - 如何获取元素的当前状态以响应渲染进度条？

问题描述

handlePercent=()=>{
    if (this.state.phone!=="") {
        this.setState(() => ({
            percent: this.state.percent + 20,
        }));
    } else if(this.state.website!==""){
        this.setState(() => ({
            percent: this.state.percent + 20,
        }));
    }
    return this.state.percent;
};

我有上述处理百分比状态的函数，但即使对象的状态，例如电话不是空的，它也不会给我正确的状态。例如，我使用控制台日志检查了电话状态，它是空的。

波纹管在那里，我称之为百分比对象。我用过“react-sweet-progress”

 <div className="percent">
        <p>Your profile is {this.state.percent}% complete:</p>
        <Progress percent={this.handlePercent()}/>
 </div>

标签： reactjsprogress-barprogress

解决方案

您应该使用prevStateinsetState而不是使用this.state

handlePercent = () => {
    if (this.state.phone !== "") {
        this.setState(prevState=> ({
            percent: prevState.percent + 20,
        }))
    } else if(this.state.website!==""){
        this.setState(prevState=> ({
            percent: prevState.percent + 20,
        }))
    }
    // don't return state
}

并传递this.state.percent给Progress

<Progress percent={this.state.percent}/>

并handlePercent在代码中的其他地方调用。

原因don't return state是当您调用this.setState它时，它将重新渲染组件并this.state.percent生成正确的百分比。如果你 return this.state.percent，它将返回错误的数据。

请添加组件的完整逻辑，以更好地了解如何做你想做的事。

推荐阅读