函数中该值为null(React-Native)

Question

根据本地测试,'this'在行渲染函数中似乎为null.因此,这阻止了我在onPress道具上绑定本地函数.

我有这个渲染块:

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

和一个本地功能

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

然后行渲染

_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')"

检查renderRow上的"this"在替换上面的代码时返回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]

有人可以指出导致这种情况的原因.谢谢.

Answer 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
  }
}