我有一个列表视图,每当用户单击一个项目时,我都想使用onPress(可触摸的突出显示)进行操作。
我尝试定义函数,然后在onPress中调用它们,但是它们没有起作用。
首先,我定义了这样的功能:
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上调用它:
onPress={ this._dosome.bind(this) }
没有帮助
onPress={ ()=> {this._dosome.bind(this)}}
onPress={ console.log(this.state.loaded)}
即使我什至不能访问构造函数中定义的道具。它不知道什么是“这”!
我试图以其他方式定义函数,如下所示:
var _dosome = (dd) => { console.log(dd); };
我尝试在渲染之前,渲染之后,渲染内部,renderRow内以及renderRow之后定义_dosome。所有相同的结果。
我确实检查了很多教程,rnplay上有很多示例应用程序,stackoverflow中有很多线程,很多示例,但是它们都不适合我。任何解决方案/想法?非常感谢您的帮助。我现在正在为这个问题苦苦挣扎2天。提前致谢!
更改
<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},从而创建了一个新函数(新上下文)。
bind
renderRow
renderRow={this.renderRow}