React.js函數未觸發

Question

最近，我在我的一個項目中看到一個警告，提示說React.createClass現在已被棄用，因此我正在研究一些代碼以使其與新建議兼容。

我遇到的一件事是，我的功能之一似乎沒有像以前那樣觸發。

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

下面所有的答案都是正確的，我標記為接受的答案對我來說似乎是最清晰的，但感謝大家的幫助

Answer 1

你必須明確地設置this內部changeScreen

所以用

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

代替

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

並調用您的函數

this.testFunc();

Answer 2

既然你不使用React.createClass ，你不再有this自動綁定你。 問題出在調用this.changeScreen的時候。

對代碼的最簡單更改是將其綁定到構造函數中：

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

然后確保您實際上在調用函數：

this.testFunc();

如果改為在render方法中編寫this.changeScreen.bind(this) ，則每次渲染組件時都會為函數創建一個新副本。

Answer 3

嘗試testFunc =（）=> {}或將其綁定到類似this的構造方法中。testFunc = this.testFunc.bind（this）

Answer 4

您需要使用箭頭函數語法在正確的范圍內執行changeScreen() 。

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

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

changeScreen(newScreen) {

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

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