Search code examples
reactjsreact-nativereact-native-iosreact-native-0.46

How to multiple TextInput handle with single handler?


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

Solution

  • _handleMultiInput(name) {
        return (text) => {
            this.setState({ [name]:text })
        }
    }
    
    <TextInput
       placeholder='enter your name.'
       onChangeText={_handleMultiInput('myName')}
    />