在Reactjs中，从函数内部调用组件函数

Calling a component function from within a function in Reactjs

本文关键字：函数 内部 组件 调用 Reactjs      更新时间：2023-09-26

我有一个组件，它的布局是这样的:

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

我希望能够从渲染函数中的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>
        );
    }
});

谢谢你的帮助!

您的代码没有按照您期望的方式工作的原因是因为上下文this在传递给map的匿名函数中发生了变化。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

上下文变了。所以你可以这样做。

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>
        );
    }
});
相关文章：