Javascript 更新浏览器滚动条上的进度条状态

我试图创建一个进度条，在滚动时增加/减少它的宽度%。我当前正在获取要在控制台日志中显示的滚动百分比，但无法使用滚动百分比设置状态

我现在得到的是

this.percentScrolled（）

不是一个函数，因为我是从

componentDidMount

调用它的。我的第二个关注点是这样做的性能，每个卷轴的状态都会更新很多

这就是我现在得到的，任何帮助都将不胜感激

从“React”导入React；
从“rc进度”导入{Line}；
类ProgressBar扩展了React.Component{
构造函数（）{
超级（）；
此.state={
百分比：0
};
this.percentScrolled=this.percentScrolled.bind（this）
}
componentDidMount（）{
window.addEventListener(
“卷轴”，
函数（）{
这个.percentrolled（）；
},
错误的
);
}
GetDochHeight=（）=>{
const d=文件；
返回Math.max(
d、 身高，
d、 documentElement.scrollHeight，
d、 身体，在视线之外，
d、 documentElement.offsetHeight，
d、 body.clientHeight，
d、 documentElement.clientHeight
);
}
滚动百分比=（）=>{
康斯特温海特=
窗内高度||
（document.documentElement | | document.body）；
const docHeight=this.getDocHeight（）；
常数滚动顶=
window.pageYOffset||
（document.documentElement | | document.body.parentNode | | document.body）
.滚动顶部；
const trackLength=docHeight-winHeight；
常量pctScrolled=数学圆（（滚动条/轨迹长度）*100）；
console.log（“滚动：+pctScrolled+“%”）；
这是我的国家({
百分比：pctsc
});
}
render（）{
返回(
);
}
}
导出默认进度条您正在调用此。百分比已超出范围。如果拉出匿名函数，它应该在组件的上下文中正确引用

尝试：

我尝试了你的建议，但它只是在开始时运行函数，而在scroll上什么也没有发生，所以现在它就像一个简单的函数调用。对不起，我添加了一个额外的（）。我将答案从
this.percentScrolled（）
更新为
this.percentScrolled
。试试看，让我知道这是否适合你！
  componentDidMount() {
    window.addEventListener(
      "scroll",
       this.percentScrolled,
       false
    );
  }