Получить реф через вызов функции

Question

Я пытаюсь повторить Реагировать код из this official guide:

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