在本机反应中调用不调用 FlatList 内的函数答案

【问题标题】：Call not call a function inside a FlatList in react native在本机反应中调用不调用 FlatList 内的函数
【发布时间】：2018-02-27 09:59:35
【问题描述】：

我正在使用 react native 开发应用程序。我想将参数传递给我的平面列表中特定记录的函数。但是，平面列表忽略了这行代码： onPress={ () => {console.log("TEST1"); this.onPressTopUp()} } />

这是我的代码：

<FlatList
ItemSeparatorComponent={ () => <View style={ styles.rowSep } /> }
horizontal={false}
data={this.state.result}

renderItem={
     ({item}) => (
          <View style={styles.containerrow}>
          <View style={styles.viewPark}>

          <Text style={styles.itemBold}> {I18n.t('Data_e_ora_inizio')}:
          <Text style={styles.itemNormal}>{item.start}</Text></Text>             
          <Text style={styles.itemBold}> {I18n.t('Data_e_ora_termine')}: 
          <Text style={styles.itemNormal}>{item.end}</Text></Text>
          <Text style={styles.itemBold}> {I18n.t('Energia')}: <Text style={styles.itemNormal}>{item.energy_delivered}</Text></Text>
          <Text style={styles.itemBold}> {I18n.t('Colonna')}: <Text style={styles.itemNormal}>{item.column_id}</Text></Text>
          <Text style={styles.itemBold}> {I18n.t('Costo_della_ricarica')}: 
          <Text style={styles.itemNormal}>€ {item.amount}</Text></Text>
          <Text style={styles.itemBold}> {I18n.t('Aggiornamento_del')}:     
          <Text style={styles.itemNormal}>{item.last_update}</Text></Text>
                                         </View>

        <View style={styles.rowCenter}>
          <Button label={I18n.t('Via_questa_ricarica')} color={defStyleValues.RechargeElectricCar} onPress={ () => {console.log("TEST1"); this.onPressTopUp()} } />
               </View>
            </View>
          )
        }
    keyExtractor={item => item.id}
 />

这也是我的功能：

onPressTopUp(columnID){
        console.log("TEST2, ", columnID);
}

换句话说，我的问题是我需要将每个特定行的columnID 传递给FlatList 中的onPressTopUp(columnID) 函数。我检查了控制台日志，即使它没有同时显示 TEST1 和 TEST2。你能帮我做吗？

【问题讨论】：

标签： reactjs react-native react-native-flatlist

【解决方案1】：

只需使用箭头函数，它会处理绑定。

你的功能是：-

onPressTopUp(columnID){
        console.log("TEST2, ", columnID);
}

用箭头函数替换：-它会为你工作。

onPressTopUp = (columnID) => {
     console.log("Test, ", columnID);
}

并用按钮内的标题更改标签属性

您可以像下面这样使用按钮：-

import { Button } from 'react-native';
...

<Button
  onPress={onPressLearnMore}
  title="Learn More"
  color="#841584"
  accessibilityLabel="Learn more about this purple button"
/>

【讨论】：

非常感谢。有效。投票并标记为答案。

【解决方案2】：

我认为问题是你没有bind onPressToUp 功能，试试这个：

onPressTopUp = (columnID) => {
     console.log("Test, ", columnID);

}

【讨论】：

感谢您的回答。我应该同时绑定和使用上面的代码吗？
我上面写的函数已经有bind了。但是在Button中调用onPressTopUp函数时必须发送columnID
我投了赞成票，因为它帮助了我一部分。 :) 谢谢

【解决方案3】：

Button 组件是从 React Native 导入的吗？因为 react native Button 组件没有 label 属性。您是否尝试过使用 this.onPressTopUp(15) 这样的列 ID 调用函数。希望对您有所帮助。

【讨论】：