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

我不确定为什么，但我认为这可能与此有关

更新

下面的所有答案都是正确的，我标记为接受的答案似乎对我来说最清楚，但感谢大家的帮助

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

如果您在渲染方法中编写this.changeScreen.bind(this)，则每次渲染组件时都会创建函数的新副本。

Answer 3

尝试testFunc =（）=＆gt; {}或在构造函数方法中绑定它，如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();
    ...
}

React.js函数没有触发

4 个答案: