我似乎在按下按钮时调用功能。无论我尝试什么方法,我都会得到不同的未定义错误。
我正在运行反应原生0.24并且目前只编码Android设备。
请参阅以下代码:
class ListPage extends Component {
constructor(props){
super(props);
this.nav = props.nav;
this.route = props.route;
this.ds = new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
});
this.state = ({
visible: false,
dataSource: this.ds.cloneWithRows(props.fullList),
});
}
goToPage(name){
this.nav.push({ name: name });
}
loadModal() {
this.setState({ visible: true });
}
list(row){
return (
<View style={styles.box}>
<TouchableNativeFeedback underlayColor="#FFF"
onPress={this.goToPage.bind(this,'ShowRow')}>
<View>
...ShowRow Button
</View>
</TouchableNativeFeedback>
<TouchableNativeFeedback
onPress={this.loadModal.bind(this)} >
<View style={styles.button}>
...Modal Button
</View>
</TouchableNativeFeedback>
</View>
);
}
render(){
return (
<View style={styles.container}>
<Modal visible={this.state.visible}
onRequestClose={() => {this.setState({visible: false}) }} >
<View>
<Text>I am a Modal!</Text>
</View>
</Modal>
<ListView
dataSource={this.state.dataSource}
renderRow={this.list} />
</View>
);
}
}
每当我按下任一按钮时,我得到undefined不是this.goToPage.bind和this.loadModal.bind的对象错误。
如果我试试这个:
render() { //or inside list(row) function
goToPage = function(name){
this.nav.push etc etc
}
loadModal = function() { setState etc... }
return (
...render stuff
)
}
现在说undefined不是this.nav和this.setState
的对象但如果我这样做:
constructor() {
...
goToPage = function(name){
props.nav.push(...);
}
}
它的工作原理.....但我知道这不是正确的方法,我也不能为模态设置state。为什么不使用第一种方法?非常感谢。
答案 0 :(得分:11)
好的,找到了解决方案。在renderRow中,我需要像这样绑定函数:
<ListView dataSource={this.state.dataSource}
renderRow={this.list.bind(this)} />
现在我可以使用第一种方法调用函数。