我似乎在按下按钮时调用功能.无论我尝试什么方法,我都会得到不同的未定义错误. 我正在运行反应原生0.24,目前只编码Android设备. 请看下面的代码: class ListPage extends Component { construct
我正在运行反应原生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(...);
}
}
它工作…..但我知道这不是正确的方法,我也不能为模态setState.为什么不使用第一种方法?非常感谢.
好的,找到了解决方案.在renderRow中,我需要像这样绑定函数:<ListView dataSource={this.state.dataSource}
renderRow={this.list.bind(this)} />
现在我可以使用第一种方法调用函数.
