Question

我试图通过从州传递fixed道具来定位修复，但我无法在setState函数内handleScroll。我不确定如何访问函数内部的状态。

class App extends Component {

  state = { fixed: false }

  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  }

  handleScroll(e) {
    let scrollTop = e.srcElement.body.scrollTop;
    (scrollTop > 0) ? this.setState({ fixed: true }) : this.setState({ fixed: false });
  }

  render() {
    // grab steps
    const { steps } = this.props;
    const { fixed } = this.state;
    const { scrollToStep } = this;

    return ce('div', { className:'allTheSteps' },
      ce(pagination, { steps, fixed }),
      Object.values(steps).map((step, i) =>
        ce(Steps, { step, key: v4(), i }),
      )
    );
  };

};

Answer 1

您需要绑定handleScroll方法：

class App extends Component {

  constructor(props) {
    super(props);
    this.handleScroll = this.handleScroll.bind(this);
  }

  ...

};

Answer 2

您的回调正在错误的范围内执行。您必须将其绑定到正确的范围。为此，您可以使用ES6箭头功能，并且您的方法应该绑定，而无需手动执行。在您的示例中：

...
    componentDidMount() {
        window.addEventListener('scroll', (e) => this.handleScroll(e));
    }

    componentWillUnmount() {
        window.removeEventListener('scroll', (e) => this.handleScroll(e));
    }
...

访问类内部滚动addeventlistener中的道具

2 个答案: