Это значение равно нулю в функции (React-Native)

В соответствии с локальным тестированием, 'this' кажется нулевым внутри функции рендеринга строки. В результате это мешает мне привязать локальную функцию к onPress prop.

У меня есть этот блок рендеринга:

render() {
    return (
        <ListView
            dataSource={this.state.dataSource}
            renderRow={this._renderRow}
            renderHeader={this._renderHeader} 
            style={styles.listView} />
    );
}

и локальной функции

_visitEntryDetail() {
    console.log('test');
}

тогда строка render

_renderRow(something) {
    return (
        <TouchableHighlight
            style={[styles.textContainer, filestyle.container]} 
            onPress={this._visitEntryDetail.bind(this)} >
            <View>
                <Text style={filestyle.text1} >{something.detail}</Text>
                <Text style={filestyle.text2} >{something.size}, {something.timestamp}</Text>
            </View>
        </TouchableHighlight>
    );
}

Это возвращает

message: null is not an object (evaluating 'this.$FileList_visitEntryDetail')"

проверка "this" на renderRow возвращает значение null при замене кода выше:

_renderRow(file) {
    console.log(this);
    return (
        <TouchableHighlight
            style={[styles.textContainer, filestyle.filelistcontainer]} 
             >

со следующим выходом консоли:

RCTJSLog> null

но отлично, если

render() {
    console.log('inside render. this value is below me');
    console.log(this);
    return (
        <ListView

Приставки

RCTJSLog> "inside render. this value is below me"
RCTJSLog> [object Object]

Может кто-нибудь, пожалуйста, укажет, что вызывает это. Спасибо.

Ответы

Ответ 1

this имеет значение null, поскольку _renderRow не привязан к текущему классу. Пожалуйста, имейте в виду:

В конструкторе вам нужно явно привязать функцию, если вы хотите передать ее любому компоненту реакции, поскольку иногда он не связывается неявно.

Этот оператор применяется к любой функции, передаваемой компоненту. Например, вы хотите вызвать функцию callThisFunction при нажатии TouchableHighlight. Вы можете связать его с помощью:

class SomeComponent extends Component {

  constructor(props) {
    super(props)

    //binding function
    this.renderRow = this.renderRow.bind(this)
    this.callThisFunction = this.callThisFunction.bind(this)
  }

  renderRow() {
    console.log(this) //not null now
    return (
      <View>
        <TouchableHighlight onPress={this.callThisFunction}>
          <Image source={require('image!prev')}/>
        </TouchableHighlight>
      </View>
    )
  }

  callThisFunction() {
    console.log(this) //not null now
  }
}

Ответ 2

Альтернативой решению NightFury должно быть использование ES6 Arrow Function без необходимости вручную связывать функцию в конструкторе. Ваш render() будет выглядеть следующим образом:

render() {
    return (
       <ListView
           dataSource={this.state.dataSource}
           renderRow={() => this._renderRow()}
           renderHeader={() => this._renderHeader()} 
           style={styles.listView} />
    );
}