I have create common class for TextInput and use it multiple time but its event handle with same method. i want to handle array data after filled the data in textInput.
Here Added multiple textField and single handleAddMore
. How to identify which textInput called the handleAddMore
.
The textField component added dynamically according to array data. now when user edit the textInput I want to identify the textInput and updated array text on particular index.
let addMoreCompView = this.state.dataAddMore.map((data ,index) =>{
return(
<View style ={[styles.commonMargin ,{flexDirection : 'row',marginTop : 2 , height : 40, backgroundColor : Globle.COLOR.INPUTCOLOR}]}>
<View style = {{height : '100%' , width : '80%' , justifyContent: 'center' ,alignItems: 'flex-start', flexDirection : 'column'}}>
<TextInput style = {{fontFamily: 'Gotham-Light',fontSize : 14 ,color: Globle.COLOR.BACKCOLOR , paddingLeft : 20}}
underlineColorAndroid = "transparent"
placeholder = 'Please enter emailID.'
placeholderTextColor = 'black'
autoCapitalize = "none"
keyboardType = "email-address"
onSubmitEditing ={Keyboard.dismiss}
onChangeText = {this.handleAddMore}
autoCorrect = {false}/>
</View>
<TouchableOpacity onPress = {() => this.removeMoreComponent(data.key)} style = {{height : '90%' , width : '20%' , alignItems: 'flex-end', justifyContent: 'center'}}>
<Image style = {{width : 9 , height : 10 , marginRight : 20}} source = {require('./Images/cancelMore.png')}/>
</TouchableOpacity>
</View>
)
});
Here I want to identify which TextInput
called this method.
Here I want to text and index of textField.
handleAddMore = (text) =>{
// Here I want to text and index of textField.
}
_handleMultiInput(name) {
return (text) => {
this.setState({ [name]:text })
}
}
<TextInput
placeholder='enter your name.'
onChangeText={_handleMultiInput('myName')}
/>