Question

我试图从this official guide复制React代码：

  render: function() {
    return <TextInput ref={(c) => this._input = c} />;
  },
  componentDidMount: function() {
    this._input.focus();
  },

基本上，我使用ES5并尝试过：

 componentDidMount: function() {
        this.searchBox.focus();
    },

    render: function() {
        return (
            <input type="text" ref={function(c) {this.searchBox = c}} />
        );
    }

但是我说错了：

Uncaught TypeError: Cannot read property 'focus' of undefined

上面的代码是不是像ES6版本一样？我不明白为什么它不起作用。如果您对完整代码感兴趣，请点击此处：https://jsfiddle.net/xpd85ehx/

Answer 1

ES5和ES6箭头符号使用不同的this。

具体来说，使用箭头符号，this在词法上绑定到周围的函数（因此它指的是类）。

使用ES5，您需要将this绑定到您的函数。

Answer 2

es6版本使用箭头函数，它将函数自动绑定到现有范围。例如，

function(c) {this.searchBox = c}

未绑定到组件的实例，而

c => this.searchBox = c

是。在第一个示例中，很难知道this是什么，但在第二个示例中，我们可以非常确定this是对我们组件的引用。如果你想让你的解决方案在es5中运行，你需要像这样手动绑定

render: function() {
    return (
        <input type="text" ref={(function(c) {this.searchBox = c}).bind(this)} />
    );
}

通过函数调用获取引用

2 个答案: