问题描述
我有一个listview,每当用户点击某个项目时,我想用onPress做一些事情(可触摸的高亮显示)。
I have a listview, whenever user clicks on an item, i want to do something with onPress (touchable highlight).
我尝试定义函数然后调用它们onPress,但他们没有工作。
I tried defining function then calling them in onPress but they didnt work.
首先我定义了这样一个函数:
first i defined a function like this :
constructor(props) {
super(props);
this.state = {
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
}),
loaded: false,
};
this._dosome = this._dosome.bind(this);
}
_dosome(dd){
console.log(dd);
}
然后:
render(){
if (!this.state.loaded) {
return this.renderLoadingView();
}
return (
<View style={{
flex: 1
}}>
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderRow}
style={styles.listView}
/>
</View>
);
}
renderRow(data) {
var header = (
<View>
<View style={styles.rowContainer}>
<View style={styles.textContainer}>
<Text style={styles.title}>{data.nid}</Text>
<Text style={styles.description} numberOfLines={0}>{data.title}</Text>
</View>
</View>
<View style={styles.separator}></View>
</View>
);
///////////
var cid = [];
var content = [];
for(let x=0; x < Object.keys(data.course).length; x++){
cid[x] = data.course[x].course_id;
content.push(
<TouchableHighlight
underlayColor='#e3e0d7'
key={x}
onPress={ this._dosome } //// **** PROBLEM HERE ****
style={styles.child}
>
<Text style={styles.child}>
{data.course[x].title}
</Text>
</TouchableHighlight>
);
}
console.log(cid);
var clist = (
<View style={styles.rowContainer}>
{content}
</View>
);
////////////
return (
<Accordion
header={header}
content={clist}
easing="easeOutCubic"
/>
);
}
renderLoadingView() {
return (
<View style={styles.loading}>
<Text style={styles.loading}>
Loading Courses, please wait...
</Text>
</View>
);
}
}
但它没有用,错误:
TypeError: Cannot read property '_dosome' of null(…)
我试着像这样调用onPress:
I tried calling it onPress like this :
onPress={ this._dosome.bind(this) }
没有帮助
onPress={ ()=> {this._dosome.bind(this)}}
没有帮助
onPress={ console.log(this.state.loaded)}
即使我甚至无法访问构造函数中定义的道具。它不知道什么是这个!
even i cannot even access props defined in constructor. it don't know what is "this" !
我试图用其他方式定义函数:
I tried to define the function other way like this :
var _dosome = (dd) => {
console.log(dd);
};
我尝试在渲染之前,渲染之后,渲染内部,renderRow之内以及renderRow之后定义_dosome。所有相同的结果。
I tried defining the _dosome before render, after render, inside render, inside renderRow, and after renderRow. all same results.
我确实检查过许多教程,rnplay上的大量示例应用程序,stackoverflow中的大量线程,很多示例,但它们都没有为我工作。
任何解决方案/想法?
我们非常感谢任何帮助。我现在正在努力解决这个问题2天。
提前致谢!
I did check lots of tutorials, lots of sample apps on rnplay, lots of threads in stackoverflow, lots of examples, but none of them worked for me.any solutions/ideas?Any help is highly appreciated. i'm struggling with this issue for 2 days now.Thanks in Advance!
推荐答案
如何解决问题
更改
How to solve your problem
Change
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderRow}
style={styles.listView}
/>
到
<ListView
dataSource={this.state.dataSource}
renderRow={data => this.renderRow(data)}
style={styles.listView}
/>
或
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderRow.bind(this)}
style={styles.listView}
/>
为什么?
如您所知(因为你试图通过使用箭头函数和 bind
来解决问题),要调用 renderRow
,调用者应该在与组件本身相同的上下文中。
但是这个连接在 renderRow = {this.renderRow}
中丢失,这创建了一个新函数(新的背景)。
Why?
As you already know(since you are trying to solve the problem by using arrow function and bind
), to call renderRow
, the caller should be in the same context as the component itself.
But this connection is lost in renderRow={this.renderRow}
, which created a new function(new context).
这篇关于React-Native:无法访问状态值或从renderRow声明的任何方法的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!