ReactJS - Uncaught ReferenceError: Funktion ist nicht definiert

Question

Ich bin neu zu reagieren und ich habe ein Problem mit undefinierter Funktion.

Wie ich sehe ich es an meinem Konstruktor definieren, aber ..

bundle.js: 758 Uncaught Reference: MyCallback nicht definiert ist.

import React from "react"; 
import ReactDOM from "react-dom"; 
import Vivus from "vivus"; 

export default class MySkills extends React.Component { 
    constructor() { 
     super(); 
     this.state = {visable: false}; 
     this.onScroll = this.onScroll.bind(this); 
     this.myCallback = this.myCallback.bind(this); 
    } 

    componentDidMount() { 
     document.addEventListener('scroll', this.onScroll); 
    } 

    myCallback() { 
     alert("myCallback"); 
    } 

    onScroll() { 
     var scrollY = window.scrollY; 
     if (scrollY > 2300 && this.state.visable === false) { 
      new Vivus("foo", {duration: 100, file: 'bar'}, myCallback.bind(this)); 
    } 
} 

Vielleicht kann jemand die Bindung von Funktionen besser erklären? Es scheint mit der onScrool-Funktion zu arbeiten, aber die myCallback-Funktion funktioniert nicht.

Vielen Dank!

Answer 1

Sie haben in Ihrem Konstruktor die Bindung (was ich nicht empfehlen), so können Sie dies nur schreiben ändern

new Vivus("foo", {duration: 100, file: 'bar'}, myCallback.bind(this)); 

dieser

new Vivus("foo", {duration: 100, file: 'bar'}, this.myCallback); 

Oder Sie die Bindungen in der überspringen Konstruktor und verwenden Sie diese

Oder Sie können die Bindungen im Konstruktor überspringen und einen Pfeil Spaß verwenden ction (meine persönliche Empfehlung)

new Vivus("foo", {duration: 100, file: 'bar'},()=> myCallback()) 

Wenn der Rückruf ein Argument akzeptieren, muss

new Vivus("foo", {duration: 100, file: 'bar'}, x=> myCallback(x)) 

Oder wenn der Rückruf eine variable Anzahl von Argumenten annehmen muss

new Vivus("foo", {duration: 100, file: 'bar'}, (...args)=> myCallback(...args)) 

Ist das genug Optionen?

^_^

---

Ebenso würde ich empfehlen, die Bindung für this.onScroll im Konstruktor zu entfernen und wo Sie diese

componentDidMount() { 
    document.addEventListener('scroll', this.onScroll); 
} 

verwenden stattdessen

componentDidMount() { 
    document.addEventListener('scroll', event=> this.onScroll(event)); 
}