如何使用单个处理程序处理多个TextInput句柄?

Kir*_*odi 3 reactjs react-native react-native-android react-native-ios react-native-0.46

我为TextInput创建了通用类,并多次使用了它,但是它的事件句柄具有相同的方法。我想在将数据填充到textInput中之后处理数组数据。

在这里添加了多个textField和single handleAddMore。如何识别哪个textInput称为handleAddMore

textField组件根据数组数据动态添加。现在,当用户编辑textInput时,我想在特定索引上标识textInput和更新的数组文本。

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>
 )
});
Run Code Online (Sandbox Code Playgroud)

在这里,我想确定哪个TextInput称为此方法。

在这里我要给textField的文本和索引。

 handleAddMore = (text) =>{

    // Here I want to text and index of textField.
 }
Run Code Online (Sandbox Code Playgroud)

小智 7

_handleMultiInput(name) {
    return (text) => {
        this.setState({ [name]:text })
    }
}

<TextInput
   placeholder='enter your name.'
   onChangeText={_handleMultiInput('myName')}
/>
Run Code Online (Sandbox Code Playgroud)