Question

我需要访问嵌套在处理函数中的函数中的React组件。

在嵌套函数this中没有提供对组件的引用

所以我明确声明它而不是做通常的this.setState(...)

除了以下代码之外，还有更简洁的方法吗？

React.createClass({

    uploadImage : function() {
    ...
    var componentReference = this

    xhrRequest.onreadystatechange = function()
        {if(request.readyState==4) {
        componentReference.setState({uploadStatus: request.status});
        }
    }

Answer 1

这就是JavaScript的工作原理：

您必须在不同上下文中调用的函数中保留对您要访问的内容的引用（就像您使用变量实现的那样）...

或

...绑定调用函数时this指向的内容。没有必要使用库（如lodash）因为ECMAScript 5.1内置了它，你可以在任何最近的浏览器中使用它（Chrome 7 +，Firefox 4 +，IE 9 +，Safari 5.1） +），请参阅https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

如果您需要支持旧浏览器，可以自行实施bind功能，例如参见Underscore.js＆＃39; Function.prototype.bind实施：http://underscorejs.org/#bind

Answer 2

最常用的方法是使用原生.bind()方法，不需要库：

React.createClass({
    uploadImage : function() {
        // ...

        xhrRequest.onreadystatechange = function() {
            if(request.readyState == 4) {
                this.setState({ uploadStatus: request.status });
            }
        }.bind(this)

        // ...
    }
})

.bind(this)设置this 里面.onreadystatechange关闭内容的上下文。这有点像将范围传递给内部函数。

Answer 3

如果您正在使用例如lodash，您可以这样做：

xhrRequest.onreadystatechange = _.bind(function () {
    if ( request.readyState == 4 ) {
        this.setState({ uploadStatus: request.status });
    }
}, this);

或者，如果你使用jQuery，你可以proxy。

Answer 4

你可以简单地在普通的旧JS中使用Function bind方法，比如function（）{}。bind（this），然后＆＃34;这个＆＃34;你的函数内部将是你的React组件。

您可以在此处查看bind（）的定义https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

Answer 5

您可以将onreadystatechange处理程序放在“类”本身上，从React的自动绑定中获利。

你也可以保留对setState的引用，但我不确定它是否也是自动绑定的。试试看。

最后但同样重要的是，既然您可能正在使用转换器，则可以使用ES6箭头功能。箭头函数使用this（词汇this）

的“外部”值

React：最简单的访问组件的方式，而不使用＆＃34;这个＆＃34;

5 个答案: