反应功能未激活答案

【问题标题】：React function not activating反应功能未激活
【发布时间】：2019-07-29 21:35:09
【问题描述】：

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

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

我的最终目标是将名为 testing2 的类添加到 state 属性并更改当用户向下滚动超过 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;
}

这就是我得到的：

TypeError：无法读取未定义的属性“更改”

这就是我想要的：

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

【问题讨论】：

标签： reactjs

【解决方案1】：

这里有两个主要问题。

设置scroll 事件应该是这样的：

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

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

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

你正在绑定一个箭头函数（词法 this）。在没有bind 的情况下使用类方法表示法或箭头函数：

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

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

【讨论】：

就是这样。我在发布答案之前创建了一个demo，这个答案应该可以工作，甚至更好，因为它消除了均匀的听众。

【解决方案2】：

您丢失了 this 对象的上下文。内

function myFunction() {}

你有了新的作用域，因此this 失去了它的上下文。您需要将 myFunction 作为方法并将其绑定到构造函数中的范围。

您目前的解决方案有myFunction() 调用this.change，这意味着编译器正在myFunction() 内寻找change，这显然不是您的代码结构。

这样的东西会为你服务：

class App extends Component {

  constructor(props){
  super(props);

  this.state = {
     classAnimation: '' 
  };

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


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

myFunction() {
   // Code for myFunction that calls this.change
}

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

【讨论】：