Question

在 Reactjs 中的函数中调用组件函数

2016-08-29

1230

javascript reactjs

我有一个布局如下的组件：

var Entry = React.createClass({
    // executes code on a button press.

    onButtonClick: function (event) {
       // (do stuff)
    },

    // generates the entry list with a button and some info.

    render: function() {
        var entryList= this.props.data.map(function(entry) {
            // (convert timestamp into relative time, add some tags etc)
            return (
                <p> entry.information </p>
                <a onClick={onButtonClick} className="btn right" id={entry.link}>
                    go
                </a>
            );
        });

        // returns the html of the component

        return (
            <div className="entryList">
                {entryList}
            </div>
        );
    }
});

我希望能够在 render 函数的 entryList 变量中运行 onButtonClick 函数，但我似乎不知道该怎么做。运行时控制台显示 onButtonClick 未定义。

Uncaught ReferenceError: onButtonClick is not defined

如何“转义”该函数？我认为 this.props.data.map(function(items) {}); 使问题变得复杂，因为如果我像这样移动按钮，我就可以正常访问它

        // returns the html of the component

        return (
            <div className="entryList">
                <a onClick={this.onButtonClick} className="btn right">go</a>
                {entryList}
            </div>
        );
    }
});

感谢您的帮助！

Answer 1

您的代码无法按预期工作的原因在于传递给 map 的匿名函数内部的上下文 this 发生了变化。 map 采用可选的第二个参数，该参数表示回调将使用的 this 的值。因此，只需将 this 作为第二个参数添加到 map 即可解决您的问题。

var entryList = this.props.data.map(function(entry) {
    ...
}, this);

使用 ES2015 的开发人员还可以使用箭头函数自动绑定 this 的正确上下文。

var entryList = this.props.data.map(entry => {
    ...
});

参考： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Answer 2

上下文发生变化。所以你可以这样做。

var Entry = React.createClass({
    // executes code on a button press.

    onButtonClick: function (event) {
       // (do stuff)
    },

    // generates the entry list with a button and some info.

    render: function() {
      var self = this;
        var entryList= this.props.data.map(function(entry) {
            // (convert timestamp into relative time, add some tags etc)
            return (
                <p> entry.information </p>
                <a onClick={self.onButtonClick} className="btn right" id={entry.link}>
                    go
                </a>
            );
        });

        // returns the html of the component

        return (
            <div className="entryList">
                {entryList}
            </div>
        );
    }
});

或者简单地

var Entry = React.createClass({
    // executes code on a button press.

    onButtonClick: function (event) {
       // (do stuff)
    },

    // generates the entry list with a button and some info.

    render: function() {
        var entryList= this.props.data.map(function(entry) {
            // (convert timestamp into relative time, add some tags etc)
            return (
                <p> entry.information </p>
                <a onClick={this.onButtonClick} className="btn right" id={entry.link}>
                    go
                </a>
            );
        },this);

        // returns the html of the component

        return (
            <div className="entryList">
                {entryList}
            </div>
        );
    }
});