ReactJS - 未捕獲ReferenceError：函數未定義

Question

我是新的reactJs和我有一個未定義函數的問題。

當我看到我在構造函數中定義它，但..

bundle.js：不定義myCallBack函數：758未捕獲的ReferenceError。

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)); 
    } 
} 

也許有人可以更好地解釋函數的綁定？它似乎與onScrool函數一起工作，但myCallback函數不起作用。

謝謝！

Answer 1

您已經在構造函數中的結合（我不推薦），這樣你可以只寫改變這種

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

這個

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

或者你可以跳過的綁定構造函數並使用它

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

或者您可以跳過構造函數中的綁定並使用箭頭樂趣ction（我的個人建議）

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

如果回調需要接受一個參數

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

或者，如果回調需要接受可變數量的參數

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

這就夠了選擇？

^_^

---

同樣，我建議刪除在構造函數this.onScroll的約束力和在那裏你有這個

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

使用這個代替

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