React.js function not firing

Question

I recently saw a warning pop up on one of my projects saying that the React.createClass is now deprecated so I'm going through some of the code to make it compatible with the new recommendations.

One thing I've run into though is that one of my functions doesn't seem to fire like it used to.

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

I can't seem to get testFunc to fire, I've tried calling like follows

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

I'm not sure why but I think it may have something to do with this

UPDATE

All of the answers bellow are correct, the one I marked as accepted seems the clearest to me but thanks to everyone for their help

Answer 1

You have to explicitly set the this inside changeScreen

So use

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

instead of

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

and call your function

this.testFunc();

Answer 2

Now that you're not using React.createClass , you no longer have this automatically bound for you. The problem is at the point where this.changeScreen is called.

The simplest change to your code would be to bind it in the constructor:

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

Then make sure you're actually calling your function:

this.testFunc();

If you write this.changeScreen.bind(this) in your render method instead, you make a new copy of your function every time the component is rendered.

Answer 3

尝试testFunc =（）=> {}或将其绑定到类似this的构造方法中。testFunc = this.testFunc.bind（this）

Answer 4

You'll need to execute changeScreen() in the correct scope by using an arrow function syntax.

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

And inside the changeScreen() function, make sure to call testFunc correctly.

changeScreen(newScreen) {

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

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