无法在 React Native 嵌套组件中执行 onPress答案

【问题标题】：Unable to perform onPress in ReactNative nested component无法在 React Native 嵌套组件中执行 onPress
【发布时间】：2017-03-07 19:42:40
【问题描述】：

所以我正在使用本机反应并且无法获取要调用 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)）

据我了解 this 的值是未定义的，但是我在 SearchUser 组件中使用了如下函数。哪个正确调用函数

 <Icon onPress={this.goBack.bind(this)} name="arrow-back" />

我也试过 this.followThem.bind(this,user.id) 但无济于事我做错了什么？

【问题讨论】：

标签： react-native react-native-android

【解决方案1】：

一个简化的答案 -

  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>

【讨论】：