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