Question

我尝试在数组中定义一些步骤（我称之为页面），每个页面都应该可以在输入时调用函数。

我的页面定义位于页面数组中，nextHandler（自定义方法）设置当前页面索引并尝试调用已定义的函数。我的React类看起来（缩写）如下：

var App = React.createClass({
    pageDefinitions: [
        {
            title: "Page 1",
            enterFunction: this.enterPageOne
        }
    ],

    enterPageOne: function() {
        console.log("Something useful here");
    },

    nextHandler: function() {
        var st = this.getState();
        st.currentPageIndex = st.currentPageIndex + 1;
        this.setState(st);
        var page = this.pageDefinitions[this.state.currentPageIndex];
        console.log(typeof page.enterFunction);
        console.log(page.title);
        if ( typeof page.enterFunction === "function") {
            page.enterFunction();
        }
    },

    getInitialState: function() {
        return {
            currentPageIndex = -1
        };
    },

    render: function() {
        return (
            <div>Left out</div>
    }
});

虽然title在控制台上正确打印出来，但该函数始终未定义。如何在我的数组中提供函数引用？

编辑：由于@gillesc和@ justin-morgan指出这是范围问题（这是pageDefinition，而不是类）

编辑2：找到解决方案，我将pageDefinitions更改为getPageDefinitions()，如下所示：

getPageDefinitions: funtion() {
    var self = this;
    return [
        {
            title: "Page 1",
            enterFunction: selfenterPageOne
        }
    ];
}

Answer 1

this.enterPageOne未定义，因为this不受您认为的约束。试试这个：

var enterPageOne = function() {
    console.log("Something useful here");
};

var App = React.createClass({
    pageDefinitions: [
        {
            title: "Page 1",
            enterFunction: enterPageOne
        }
    ],
    //...etc.

Answer 2

如果您不想要App组件之外的全局函数，可以试试这个。它并不吸引人，但你可以在范围内进行管理。

 nextHandler: function() {
    ...
    var page = this.pageDefinitions[this.state.currentPageIndex];
    //register enterPageOne function into the array
    page.enterFunction = this.enterOnePage;
    console.log(typeof page.enterFunction);
    console.log(page.title);
    if ( typeof page.enterFunction === "function") {
        page.enterFunction();
    }
},

Answer 3

不要在类级别定义数组，而是返回数组的函数：

getPageDefinitions: funtion() {
    var self = this;
    return [
        {
            title: "Page 1",
            enterFunction: selfenterPageOne
        }
    ];
}

请注意：作为缺点，每次调用时都会创建一个新数组。这应该被视为

数组

3 个答案: