在 React Native 中调用不调用 FlatList 内的函数

Question

我正在使用 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。你能帮我做吗？

Answer 1

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

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

}

Answer 2

只需使用 Arrow Function ，它会负责绑定。

你的函数是：-

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

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

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

并更改您的标签属性并在您的按钮内添加标题

您可以像下面这样使用 Button :-

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

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

Answer 3

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

在 React Native 中调用不调用 FlatList 内的函数

Call not call a function inside a FlatList in react native

reactjs

react-native

react-native-flatlist