Question

我想在触发滚动事件时以百分比形式返回进度，我不知道如何更新状态以获得正确的结果，并将其显示在div标签中预先感谢。

这是我的脚本：

import React from "react";

class ProgressBar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      percentage: 0,
    };
  }


  getProgressPercentage() {
    let maxHeight = document.body.scrollHeight - window.innerHeight;
    let percent = (window.pageYOffset / maxHeight) * 100;
    let progress = Math.round(percent) + "%";
   // console.log(progress);
    return progress;
  }

  componentDidMount() {
    document.addEventListener("scroll", this.getProgressPercentage);
  }

  componentWillUnmount() {
    document.removeEventListener("scroll", this.getProgressPercentage);
  }

  render() {
    return <div> {this.state.percentage} </div>;
  }
}

export default ProgressBar;

Answer 1

使用this.setState()（docs，resource）

getProgressPercentage() {
  let maxHeight = document.body.scrollHeight - window.innerHeight;
  let percent = (window.pageYOffset / maxHeight) * 100;
  let progress = Math.round(percent) + "%";
  // console.log(progress);
  this.setState({ percentage: progress })
  return progress;
}

componentDidMount() {
  document.addEventListener("scroll", () => this.getProgressPercentage());
}

componentWillUnmount() {
  document.removeEventListener("scroll", () => this.getProgressPercentage());
}

为什么您的代码无法按预期工作：

当您写这篇文章时：

document.addEventListener("scroll", this.getProgressPercentage)

this.getProgressPercentage()不会作为组件的方法执行，而不会作为函数执行。含义this并非您的想法：它将不是您的组成部分。因此，setState上将没有this。因此，您得到的错误是：this.setState is not a function。

JavaScript中有关this的更多信息here和here，这里是arrow functions

的更多信息

Answer 2

您应该使用setState：

getProgressPercentage() {
  let maxHeight = document.body.scrollHeight - window.innerHeight;
  let percentage = (window.pageYOffset / maxHeight) * 100;
  this.setState({ percentage });
}

这将触发以正确的百分比值重新呈现。我删除了进度变量，因为我认为它应该在渲染器中。

Answer 3

使用setState，引用：Description

this.setState((state, props) => {
  return {counter: state.counter + props.step};
});

getProgressPercentage() {
  let maxHeight = document.body.scrollHeight - window.innerHeight;
  let percent = (window.pageYOffset / maxHeight) * 100;
  let progress = Math.round(percent) + "%";
  this.setState({ percentage })
}

Answer 4

在下面的实例上简单使用setState方法。

getProgressPercentage() {
  //your code
  this.setState({ percentage });
}

Answer 5

感谢您的回答，这是我找到的解决方案，无论如何，我不明白为什么在此文本中没有“ requestAnimationFrame ”的情况下“ setState”无法正常工作。

getProgressPercentage() {
    let maxHeight = document.body.scrollHeight - window.innerHeight;
    let percent = (window.pageYOffset / maxHeight) * 100;
    let progress = Math.round(percent);
    this.setState({ percentage: progress });
  }

  lisenOnScrollEvent() {
    document.addEventListener("scroll", () => {
      requestAnimationFrame(() => {
        this.getProgressPercentage();
      });
    });
  }

  componentDidMount() {
    this.lisenOnScrollEvent();
  }

如何从事件监听器更新状态

5 个答案: