onPress 的正确使用姿势
一般的 ListView 中每个 Row 的点击会对应一个 onPress 的事件,例如 push 到下一个 View,这种情况使用 onPress={this.handlePress}
,然后在 handlePress
里进行响应的操作就 OK 了。
在显示 Github 时间线的时候,每个 Row 里会提到多个用户名和仓库名,点击用户名和仓库名时需要做不同的处理。最容易想到的方法就是给 handlePress
传递参数了,如果使用下面的代码:
var action = <View style={styles.action}>
<Text>{actionDescription}</Text>
<TouchableOpacity onPress={this.goToUser(this.props.data.name)}><Text>data.payload.member.login</Text></TouchableOpacity>
<Text> to </Text>
点击时同样会报
Error: Invariant Violation: setState(...): Cannot update ...
因为上面的写法等于是在渲染的时候执行了 this.goToUser
,会导致 state 改变。 onPress 应该传递进一个函数,这个函数会在点击的时候执行。一种可行的写法是使用匿名函数封装:
<TouchableOpacity onPress={()=>{
this.goToUser(this.props.data.name)
}}>
</TouchableOpacity>
这样就不会在渲染的时候跑里面的函数,也就避免了冲突。