Comment passer et exécuter des fonctions comme accessoires dans la classe de composants dans React autochtones?

Marwin:

Je suis un débutant dans React autochtones et du mal à faire passer et exécuter des fonctions comme accessoires de parent composant enfant. Voici le code:

MainMap

import React from 'react';
import { 
    TouchableWithoutFeedback,
    StyleSheet,
    View,
    Button,
    FlatList,
    Dimensions
} from 'react-native';

import PlaceInput from '../components/PlaceInput';

const INCREMENT = 1;
const HEIGHT = Dimensions.get('window').height
const WIDTH = Dimensions.get('window').width

class MainMap extends React.Component{
    constructor(props){
        super(props);
        this.state={
            numOfInput:[],
            counter: 0,
        }
        this.onAddSearch = this.onAddSearch.bind(this)
        this.onDeleteSearch = this.onDeleteSearch.bind(this)
    }

    onAddSearch(){
        this.setState((state) => ({
            counter: state.counter + INCREMENT,
            numOfInput: [...state.numOfInput, state.counter]
        }))
    }

    onDeleteSearch(inputId){
        const items = this.state.numOfInput.filter(item => item.id !== inputId)
        this.setState({
            numOfInput: items
        })
    }
    render(){
            return(
                <TouchableWithoutFeedback onPress={this.hideKeyboard} >
                    <View style={styles.container} >

                        <Button title='Add a location' onPress={this.onAddSearch} />
                        <View style={{height: HEIGHT/2 }}>
                            <FlatList
                                data={this.state.numOfInput}
                                keyExtractor={(item, index) => item.id}
                                renderItem={itemData => {
                                    return(
                                        <PlaceInput
                                            key={itemData.item.id}
                                            // id={itemData.item.id}
                                            onDelete={this.onDeleteSearch}
                                            showDirectionOnMap={this.showDirectionOnMap}
                                            userLatitude={userLatitude}
                                            userLongitude={userLongitude}
                                        />
                                    )
                                }}
                            />
                        </View>
                    </View>
                </TouchableWithoutFeedback>
            )
        }
    }

export default MainMap;

const styles = StyleSheet.create({
    container:{
        flex: 1
    },
})

Voici le composant PlaceInput

class PlaceInput extends React.Component{
    constructor(props){
        super(props);
        ... // These lines have no relation to what I'm asking so don't mind them
  }
    ...
    render(){
        return(
            <View style={styles.buttonContainer} >
                    <View style={{flex: 1, alignItems: 'center'}}>
                        <Text style={{fontSize: 8}}>{'\u25A0'}</Text>
                    </View>
                    <View style={{flex: 4}}>
                        <TextInput 
                            autoCorrect={false}
                            autoCapitalize='none'
                            style={styles.inputStyle}
                            placeholder='Search your places'
                            onChangeText={(input) => {
                                this.setState({destinationInput: input});
                                this.getPlacesDebounced(input);
                            }}
                            value={this.state.destinationInput}
                        />
                        {/* {predictions} */}
                    </View>
                    <View style={styles.rightCol}>
                        <TouchableOpacity onPress={this.props.onDelete.bind(this, this.props.id)}>
                            <Ionicons name='md-car' size={25} style={{alignSelf: 'center'}} />
                        </TouchableOpacity>
                    </View>
                </View>
        )
  }
}

Ce que je suis en train de le faire:

• Définir une fonction à exécuter dans MainMap.js (en FlatList -> PlaceInput pour spécifique), qui consiste à supprimer une barre de recherche (l'ensemble PlaceInput dans le FlatList) à chaque fois que je clique sur le symbole droite de cette barre de recherche. La fonction est onDeleteSearch

• Le symbole droit est de style dans un TouachableOpacity comme vous pouvez le voir dans le composant PlaceInput.js. Je l'ai mis dans la dernière paire Voir

• Cependant, lorsque je clique, l'écran supprime toutes les barres de recherche, pas celui que je clique. Est - ce le problème de l'identifiant du composant PlaceInput? Ou la façon dont j'appelle les accessoires? ...

Aidez-moi, s'il vous plaît !

Kailash Vele:

<TouchableOpacity onPress={this.props.onDelete.bind(this, this.props.id)}>
     <Ionicons name='md-car' size={25} style={{alignSelf: 'center'}} />
</TouchableOpacity>

Ne liez pas, appelez this.props.onDelete(this.props.id);