使用从 Flatlist 发送到子组件的函数

Question

在处理 Flatlist 时，我正在尝试将 class 中的函数用于另一个函数。

这是我的 class 我的 flatlist 是：

_displayDetailsForMyItem = (idItem, type) => {
        this.props.navigation.navigate('ItemDetails', { idMyItem: idItem, type: type })
    }

    _displayDataList(){
        const type = this.props.route.params?.type ?? 'defaultValue'

        if (type === 'Money') {
            return this.state.moneyList
        } else if (type === 'Stuff') {
            return this.state.stuffList
        } else {
            return this.state.peopleList
        }
    }

    _deleteItem = (idItem, type) => {
        alert('Delete button pressed')
    }

    render(){
        const type = this.props.route.params?.type ?? 'defaultValue'

        if(this.state.isLoading){
            return(
              <View style={styles.activity}>
                <ActivityIndicator size="large" color="#ED6D6D"/>
              </View>
            )
        }

        return(
            <FlatList
                style={styles.list}
                data={this._displayDataList()}
                keyExtractor={(item) => item.key.toString()}
                renderItem={({item}) => <MyItem 
                    myItem={item}
                    itemType={type}
                    displayDetailsForMyItem={this._displayDetailsForMyItem}
                    deleteItem={(item) => this._deleteItem(item.id, type)}/>}
                onEndReachedThreshold={0.5}
                onEndReached={() => {
                }}
            />
        )
    }

我没有放所有代码，因为它不相关。

在另一个 class 中，我有代码的项目部分。

render(){
        const { myItem, displayDetailsForMyItem } = this.props

        let ptfPrefix
        (Platform.OS === 'android') ? ptfPrefix = 'md-' : ptfPrefix = 'ios-'
        const calIconName = ptfPrefix + 'calendar'
        const titleIconName = ptfPrefix + 'create'
        const pplIconName = ptfPrefix + 'contact'

        const RightActions = (progress, dragX) => {
            const scale = dragX.interpolate({
              inputRange: [-100, 0],
              outputRange: [0.7, 0]
            })

            return (
              <>
                <TouchableOpacity onPress={() => deleteItem(myItem.key, 'toto')}>
                  <View
                    style={{ flex: 1, backgroundColor: 'red', justifyContent: 'center' }}>
                    <Animated.Text
                      style={{
                        color: 'white',
                        paddingHorizontal: 20,
                        fontWeight: '600',
                        transform: [{ scale }]
                      }}>
                      <Ionicons name='ios-trash' size={70} color='#FFFFFF' />
                    </Animated.Text>
                  </View>
                </TouchableOpacity>
              </>
            )
        }

        return(
            <Swipeable renderRightActions={RightActions}>
                <TouchableOpacity 
                    style={styles.main_container}
                    onPress={() => displayDetailsForMyItem(myItem.key)}>

                    <View style={styles.first_line}>
                        <View style={styles.left_part_container}>
                            <View style={styles.date_container}>
                                <Image style={styles.date_bg} source={require('../assets/icons/list_bg.png')} />
                                <Ionicons name={calIconName} style={styles.top_left_elmnts} />
                                <Moment style={styles.top_left_elmnts} element={Text} format="DD/MM/YYYY" date={myItem.date} />
                            </View>
                        </View>
                        <View style={styles.right_part_container}>
                            <Text style={styles.top_right_elmnts}>{myItem.title}</Text>
                            <Ionicons name={titleIconName} style={styles.top_right_elmnts} />
                        </View>
                    </View>

                    <View style={styles.main_data}>
                        <Text style={styles.main_text}>
                            {(this.props.itemType === 'Money') ? myItem.amount + " €" : myItem.quantity + " Objets"}
                        </Text>
                    </View>

                    <View style={styles.last_row}>
                        <View style={styles.left_part_container}>
                            <Ionicons name={pplIconName} style={styles.btm_left_elmnts} />
                            <Text style={styles.btm_left_elmnts}>{myItem.people}</Text>
                        </View>
                    </View>
                </TouchableOpacity>
            </Swipeable>
        )
    }

所以在这里，我将 Flatlist class 中的 2 个函数传递给 Item Class（对我来说是两个不同的 .js 文件）。 displayDetailsForMyItem(myItem.key) 函数正常工作（似乎是因为我从 HTML 部分调用它）。

事实是我希望能够从 render() 部分之外（在 TouchableOpacity 的 onPress() 内调用第二个函数 deleteItem在 const RightActions) 中，但我有一个错误提示：

can't find variable: deleteItem

我卡住了

Answer 1

好吧，我只是没有测试所有的可能性。

只需要调用 this.props.myFunction() 而不是 myFunction （它在 HTML 部分内部工作）

使用从 Flatlist 发送到子组件的函数

Use a function sent from Flatlist to a sub component

function

react-native-flatlist