Cómo pasar y ejecutar funciones como apoyos en la clase de componentes en React nativo?

Marwin:

Soy un principiante en React nativo y luchando de paso y ejecutar funciones como accesorios de padre a hijo componente. Aquí está el código:

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

Aquí está el componente 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>
        )
  }
}

Lo que estoy tratando de hacer:

• Definir una función para ejecutar en MainMap.js (en FlatList -> PlaceInput para específico), que consiste en eliminar una barra de búsqueda (todo el PlaceInput en el FlatList) cada vez que haga clic en el símbolo de la derecha de esa barra de búsqueda. La función es onDeleteSearch

• El símbolo de la derecha es de estilo en un TouachableOpacity como se puede ver en el componente PlaceInput.js. Lo puse en el último Ver par

• Sin embargo, cuando hago clic, la pantalla se eliminan todos los barras de búsqueda, no la hago clic. ¿Es el problema de la identificación de la PlaceInput componente? O con la manera en que yo llamo los puntales? ...

Por favor, ayúdame !

Kailash Vele:

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

No se unen, llamada simplemente this.props.onDelete(this.props.id);