无法在 React Native 嵌套组件中执行 onPress
Unable to perform onPress in ReactNative nested component
所以我正在使用 react native 并且无法获取调用 onPress 的函数。我有一个 SearchUser 组件,它有一个渲染方法,我在其中调用了
<ShowUsers allUsers={this.state.details} access_token={this.state.access_token}/>
现在的ShowUsers如下
class ShowUsers extends Component{
....
render(){
var user = this.state.details;
var userList = user.map(function(user,index){
var img={
uri:user.avatar.uri,
}
return(
<ListItem icon key={ index }>
<Left>
<Thumbnail small source={img} />
</Left>
<Body>
<Text>{"@"+user.uname+" "+user.id}</Text>
<Text note>{user.fname+" "+user.lname}</Text>
</Body>
<Right>
<Icon style={{fontSize:30}} name="ios-add-circle" onPress={this.followThem(user.id).bind(this)} />
</Right>
</ListItem>
);
});
return(
<View>
{userList}
</View>);
}
followThem(userId){
Alert.alert("userId "+userId);
}
当我点击图标时出现以下错误
undefined 不是一个函数(计算 this.followThem(user.id))
据我所知,这个值是未定义的,但是我在我的 SearchUser 组件中使用了如下函数。哪个调用函数正确
<Icon onPress={this.goBack.bind(this)} name="arrow-back" />
我也试过 this.followThem.bind(this,user.id) 但没有用 我做错了什么?
一个简单的答案 -
render() {
var user = [11,22,33];
var userList = user.map((u,i) => {
return(
<Text key={i} onPress={this.followThem.bind(this, u)}>{u}</Text>
);
});
.....
}
注意map
中使用的箭头函数。它会自动将 this
绑定到回调。
你也可以这样做-
<Text key={i} onPress={() => this.followThem(u)}>{u}</Text>
所以我正在使用 react native 并且无法获取调用 onPress 的函数。我有一个 SearchUser 组件,它有一个渲染方法,我在其中调用了
<ShowUsers allUsers={this.state.details} access_token={this.state.access_token}/>
现在的ShowUsers如下
class ShowUsers extends Component{
....
render(){
var user = this.state.details;
var userList = user.map(function(user,index){
var img={
uri:user.avatar.uri,
}
return(
<ListItem icon key={ index }>
<Left>
<Thumbnail small source={img} />
</Left>
<Body>
<Text>{"@"+user.uname+" "+user.id}</Text>
<Text note>{user.fname+" "+user.lname}</Text>
</Body>
<Right>
<Icon style={{fontSize:30}} name="ios-add-circle" onPress={this.followThem(user.id).bind(this)} />
</Right>
</ListItem>
);
});
return(
<View>
{userList}
</View>);
}
followThem(userId){
Alert.alert("userId "+userId);
}
当我点击图标时出现以下错误 undefined 不是一个函数(计算 this.followThem(user.id))
据我所知,这个值是未定义的,但是我在我的 SearchUser 组件中使用了如下函数。哪个调用函数正确
<Icon onPress={this.goBack.bind(this)} name="arrow-back" />
我也试过 this.followThem.bind(this,user.id) 但没有用 我做错了什么?
一个简单的答案 -
render() {
var user = [11,22,33];
var userList = user.map((u,i) => {
return(
<Text key={i} onPress={this.followThem.bind(this, u)}>{u}</Text>
);
});
.....
}
注意map
中使用的箭头函数。它会自动将 this
绑定到回调。
你也可以这样做-
<Text key={i} onPress={() => this.followThem(u)}>{u}</Text>