reactjs - 如何使用单个处理程序处理多个 TextInput ？

Question

我已经为 TextInput 创建了公共(public)类并多次使用它，但它的事件句柄使用相同的方法。我想在 textInput 中填充数据后处理数组数据。

这里添加了多个textField和单个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>
 )
});

这里我想确定哪个TextInput调用了这个方法。

这里我想要文本字段的文本和索引。

 handleAddMore = (text) =>{

    // Here I want to text and index of textField.
 }

Answer 1

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

<TextInput
   placeholder='enter your name.'
   onChangeText={_handleMultiInput('myName')}
/>