Question

我有一个像这样布局的组件：

<p>{{ blog.title }}</p>
<p>{{ blog.posted.name}}</p>
<p>{{ blog.tags.name}}</p>
<p>{{ blog.content }}</p>

我希望能够在render函数的entryList变量中运行onButtonClick函数，但我似乎无法弄清楚如何去做。在运行它时，控制台说onButtonClick没有定义。

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

我如何逃避＆＃34;功能？我认为Uncaught ReferenceError: onButtonClick is not defined使问题变得复杂，因为如果我像这样移动按钮，我可以很好地访问它

this.props.data.map(function(items) {});

感谢您的帮助！

Answer 1

背景变化。所以你可以做到这一点。

(define cartesian-product
  (lambda (s)
    (if (null? s)
        '(())
        (append-map (lambda (el1)
                      (map (lambda (el2)
                             (cons el1 el2))
                           (cartesian-product (cdr s))))
                    (car s)))))

(cartesian-product '((1 2 3) (4 5 6)))
=> '((1 4) (1 5) (1 6) (2 4) (2 5) (2 6) (3 4) (3 5) (3 6))

或只是

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

Answer 2

您的代码未按预期方式工作的原因是因为传递给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

从Reactjs中的函数内调用组件函数

2 个答案: