在列表视图的一行中运行onPress事件函数时遇到问题。我正在学习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);
我无法运行某物函数。我尝试过各种语法，但都没有成功。问题似乎是this不是我期望的那样，并且它没有定义变量某物。
我要让它工作的唯一方法是用var something=function（）{…}声明一个外部变量在AwesomeProject类之外。
在AwesomeProject中声明时，是否有方法访问某物？根据flux架构或其他什么，这可能是一种不好的做法吗？
结果我自己找到了解决方案，在这里：https://github.com/goatslacker/alt/issues/283#issuecomment-115391700
<罢工>
问题是ES6语法没有自动绑定
this，所以需要自己动手。
自从我发布这个答案后，我学到了更多。真正的问题是当函数被执行时，这个是“绑定”的，而不是当它被声明时。它指向调用函数时附加到的对象。例如：
obj.foo(); //inside foo, this points to obj
bar(); //inside bar, this points to the global object (or undefined in strict mode)
在我的例子中，函数this.renderMovie（）作为参数传递。所以在ListView中，它将是一个“局部变量”。它将被称为与任何对象分离，就像之前的bar（）示例一样，所以this将不是我所期望的。
可以强制绑定this。
我的问题有三种可能的解决方案，我最喜欢第三种：
在代码上，将对{this.renderMovie}的引用替换为{this.renderMovie.bind（this）}
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}
/>
);
}
当然，绑定正确的函数：
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
}
变成这样：
renderMovie = (movie) => {
//code here
}
除了https://stackoverflow.com/a/36779517/6100821
<ListView
dataSource={this.state.dataSource}
renderRow={::this.renderMovie} //<-- cleaner, than bind
style={styles.listView}
/>
小心，这只是一个建议，不是标准！
