reactjs - react 功能未激活

Question

在React中，我有window.onscroll函数，当向下滚动时应该激活它将 setState classAnimation 设置为“testing2”的更改函数。

由于某种原因，更改功能未激活。它给出 TypeError: Cannot read property 'change' of undefined.

我的最终目标是将名为testing2的类添加到状态属性并更改当用户向下滚动超过 50 像素时，屏幕文本变为红色。

如果有帮助就好了。

APP.JS

import React, { Component } from 'react';
import './App.css';
import Animations from './components/animations';


class App extends Component {

  constructor(props){
    super(props);

this.state = {
  classAnimation: '' 
};

this.change = this.change.bind(this);

}


change = () => {
    this.setState({
      classAnimation: 'testing2'
    });
}



  componentDidMount() {
    window.onscroll = function() {myFunction()};

    function myFunction() {
      if (document.body.scrollTop > 50 || document.documentElement.scrollTop 
> 50) {
      this.change();
  } else {

      }
    }
   }


  render() {
    return (
      <div className="App">
        <Animations testing={this.state.classAnimation}/>

      </div>
    );
  }
}

export default App;

ANIMATION.JS

import React from 'react';

const Home = (props) => {

    return(
        <div>
                <div className={props.testing}>very good test it is</div>
        </div>
        );
    };

export default Home;   

APP.CSS

    body{
  height:1500px;
}

#myP{
  position:fixed;
}


.testing2{
  position:fixed;
  color:red;
}

这就是我得到的:

类型错误:无法读取未定义的属性“更改”

这就是我想要的:

更改名为 Lorem ipsum dolor sat amet, consectetur adipiscing elit 的文本当用户向下滚动时变为红色。

Answer 1

这里有两个主要问题。

设置scroll事件应该像这样:

myFunction = () => {
    //your logic
}

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

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

您正在绑定(bind)一个箭头函数(词法 this)。使用类方法表示法或不带 bind 的箭头函数:

change = () =>{/* Don't bind this */}

change(){/* Should be binded in `constructor` */}