如何在ListView的renderRow中访问`this`？

Question

我在为一行中的onPress事件运行函数时遇到了麻烦ListView.我正在按照React Native教程尝试从那里继续.它似乎使用ES6语法风格.

这是代码的相关部分.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */

import React, {  
  TouchableHighlight,
  AppRegistry,
  Component,
  Image,
  ListView,
  StyleSheet,
  Text,
  View,
  Alert,
} from 'react-native';

class AwesomeProject extends Component {
  constructor(props) {
    super(props);
    this.something = this.something.bind(this); // <-- Trying this, not even sure why
    this.state = {
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      }),
      loaded: false,
    };
  }

//
//Irrelevant code here. Fetching stuff and renderLoadingView
//

  something = function(){
    console.log('something');
    Alert.alert(
      'Alert Title',
      'alertMessage',
    );
  }


  render() {
    console.log('this', this); //this is an instance of AwesomeProject
    if (!this.state.loaded) {
      return this.renderLoadingView();
    }

    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderMovie}
        style={styles.listView}
        />
    );
  }

  renderMovie(movie) {
    console.log('Not this', this); //this is not an instance of AwesomeProject
    return (
      <TouchableHighlight onPress={() => {console.log(this); this.something()}}>
     <View style={styles.container}>
        <Image
          source={{uri: movie.posters.thumbnail}}
          style={styles.thumbnail}                    
        />
        <View style={styles.rightContainer}>
          <Text style={styles.title}

          >{movie.title}</Text>
          <Text style={styles.year}>{movie.year}</Text>
        </View>
      </View>
       </TouchableHighlight>
    );
  }
}

//
//More irrelevant code here. Styles and the 
//

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

我无法运行该something功能.我尝试了各种语法但没有成功.问题似乎this不是我所期望的那样,并且它没有something定义变量.

我必须使其工作的唯一方法是var something = function(){...}在AwesomeProject类之外声明一个外部变量.

something在声明里面有没有办法进入AwesomeProject？根据通量架构或其他什么,这可能是一个不好的做法？

Answer 1

结果我自己找到了解决方案,这里:https://github.com/goatslacker/alt/issues/283#issuecomment-115391700

问题是,使用ES6语法,您没有自动绑定this,因此您需要自己完成.

我的问题有三种可能的解决方案,我最喜欢第三种:

选项1:在通话时手动绑定

在代码,更换referece到this蒙山this.renderMovie()

obj.foo(); //inside foo, this points to obj
bar(); //inside bar, this points to the global object (or undefined in strict mode)

选项2:对构造函数进行绑定

当然,绑定正确的功能:

  render() {
    console.log('this', this); //this is an instance of AwesomeProject
    if (!this.state.loaded) {
      return this.renderLoadingView();
    }

    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderMovie.bind(this)} //<-- change here
        style={styles.listView}
        />
    );
  }

选项3:使用箭头语法让他们完成工作

我最喜欢这个.您只需要使用箭头语法声明所涉及的函数,这样:

  constructor(props) {
    super(props);
    this.something = this.something.bind(this); // <-- Not this function
    this.renderMovie = this.renderMovie.bind(this); // <-- This function!!
    this.state = {
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      }),
      loaded: false,
    };
  }

成为这个:

  renderMovie(movie) {
    //code here
  }