Используйте функцию, отправленную из Flatlist в подкомпонент - PullRequest
Новая
       18

Используйте функцию, отправленную из Flatlist в подкомпонент

0 голосов
/ 21 февраля 2020

Я пытаюсь использовать функцию из класса в другой при работе с 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={() => {
                }}
            />
        )
    }

Я не поместите весь код, так как он не имеет отношения.

В другом классе у меня есть часть элемента моего кода. 

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>
        )
    }

Итак, я передаю 2 функции из класса Flatlist в Item Класс (два разных. js файла для меня). Функция displayDetailsForMyItem(myItem.key) работает правильно (кажется, это потому, что я вызываю ее из части HTML).

Дело в том, что я хотел бы иметь возможность вызвать вторую функцию deleteItem из за пределами render() части (в пределах onPress() TouchableOpacity, которая находится в const RightActions), но у меня есть ошибка, говорящая:

не может найти переменную: deleteItem

Я застрял

1 Ответ

0 голосов
/ 21 февраля 2020

Хорошо, я просто не тестировал все возможности.

Просто нужно позвонить this.props.myFunction() вместо myFunction (который работает внутри части HTML)

...