React.js函數沒有觸發

我最近在我的一個項目中看到一個警告彈出，說React.createClass現在已被棄用，所以我正在通過一些代碼來使它與新建議兼容。React.js函數沒有觸發

我遇到的一件事是，我的一個功能似乎並不像以前那樣開火。

class Example extends React.Component { 

    constructor() { 

     super(); 
     this.state = { content: "Initialize" } 

    } 

    changeScreen(newScreen) { 

     // this fires 
     alert("fired 01"); 

     // this function does not 
     this.testFunc; 

     var screen = ""; 

     switch(newScreen) { 
      case "one": 
       screen = "var01"; 
       break; 
      case "two": 
       screen = "var02"; 
       break; 
      default: 
       screen = "failed"; 
       break; 
     } 

    } 

    testFunc() { 
     alert("fired 02"); 
    } 

    render() { 

     return (
      <div> 
       <External.Element execChangeScreen={this.changeScreen} /> 
       {this.state.content} 
      </div> 
     ); 

    } 

} 

ReactDOM.render (
    <Example />, 
    document.getElementById("app") 
);

我似乎無法得到testFunc火，我已經打過電話一樣如下

this.testFunc(); 
this.testFunc; 
() => this.testFunc();

我不知道爲什麼，但我認爲它可能有一些做這個

UPDATE

所有的答案波紋管是正確的，我標記爲接受了一個似乎最明確的給我，但由於everyon E對於他們的幫助

來源

2017-04-10 Trent

this.testFunc（）是調用函數的正確方法。 this.testFunc只是對函數的引用。（）=> this.testFunc（）定義了一個新函數。 –

你必須明確地設置this內changeScreen

所以使用

<External.Element execChangeScreen={this.changeScreen.bind(this)} />

，而不是

<External.Element execChangeScreen={this.changeScreen} />

，並調用你的函數

this.testFunc();

來源

2017-04-10 16:24:26

既然您沒有使用React.createClass，您將不再有this自動爲您綁定。問題在於this.changeScreen被調用。

你的代碼最簡單的變化將其綁定在構造函數中：

this.changeScreen = this.changeScreen.bind(this);

然後確保你實際上是調用你的函數：

this.testFunc();

如果你在寫this.changeScreen.bind(this)您渲染方法，而每次渲染組件時，都會爲函數創建一個新副本。

來源

2017-04-10 16:25:17

嘗試testFunc =（）=> {}或結合它在構造方法等this.testFunc = this.testFunc.bind（本）

來源

2017-04-10 16:25:36 maxwellgover

您需要在正確的範圍，通過使用執行changeScreen()一個箭頭函數語法。

<External.Element execChangeScreen={() => this.changeScreen('one')} />

而且在changeScreen()函數中，請確保正確調用testFunc。

changeScreen(newScreen) { 

    // this fires 
    alert("fired 01"); 

    // this function does not 
    this.testFunc(); 
    ... 
}

來源

2017-04-10 16:34:48

React.js函數沒有觸發

回答

相關問題