Wie mehrere TextInput Handle mit einzelnen Handler?

Question

Ich habe gemeinsame Klasse für TextInput erstellen und verwenden Sie es mehrere Male, aber sein Ereignis behandeln mit derselben Methode. Ich möchte Array-Daten behandeln, nachdem die Daten in textInput gefüllt wurden.

Hier hinzugefügt mehrere textField und single handleAddMore. Wie erkennt man, welcher TextInput handleAddMore aufgerufen hat?

Die TextField-Komponente wurde dynamisch gemäß den Array-Daten hinzugefügt. Wenn der Benutzer den TextInput bearbeitet, möchte ich den textInput- und den aktualisierten Arraytext für einen bestimmten Index identifizieren.

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

Hier möchte ich feststellen, welche TextInput diese Methode aufgerufen.

Hier möchte ich Text und Index von TextField.

handleAddMore = (text) =>{ 

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

See GIF:

Answer 1

Sie können nur einen anderen Parameter handleAddMore passieren?

<TextInput 
    placeholder = 'Please enter emailID.' 
    onSubmitEditing ={Keyboard.dismiss} 
    onChangeText = {(text) => { this.handleAddMore(text, 'textInput1'); }} 
    autoCorrect = {false} 
/> 

handleAddMore = (text, textInput) => { 

} 

---

aktualisieren 1

onChangeText empfängt text als Parameter und onChange empfängt event

---

aktualisieren 2

Ich habe ein kleines Projekt erstellt, um Ihnen zu zeigen, wie es funktioniert. Sie können den Code überprüfen und nach Belieben in Ihr Projekt implementieren. Wenn Sie den Fehler nicht genau erklären, wird es schwieriger, genau das herauszufinden, was mit Ihrem Code falsch ist. Sagen funktioniert nichtist nie genug.Sie können das Projekt finden auf Here (Expo)

export default class App extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     info: '', 
     inputCount: 3, 
     data: [{ name: 'input1' }, { name: 'input2' }, { name: 'input3' }], 
    }; 
    this.inputRefs = {}; 
    } 

    onAddMore() { 
    const newData = this.state.data; 
    newData.push({ name: `input${this.state.inputCount + 1}` }); 
    this.setState(prevState => ({ 
     inputCount: prevState.inputCount + 1, 
     data: newData, 
    })); 
    } 

    _onChangeText(text, inputName) { 
    console.log('Input Name:', inputName, text); 
    console.log("Inout's Ref:", this.inputRefs[inputName]); 
    const info = `${this.state.info}\n\r${inputName} changed text`; 
    this.setState({ 
     info 
    }); 
    } 

    _onChange(event, inputName) { 
    console.log('Input Name:', inputName); 
    } 

    render() { 
    return (
     <View style={styles.container}> 
     {this.state.data.map(d => (
      <View style={styles.inputWrapper} key={d.name}> 
      <TextInput 
       style={styles.input} 
       onChangeText={(text) => { this._onChangeText(text, d.name); }} 
       onChange={(event) => { this._onChange(event, d.name); }} 
       ref={ref => { 
       this.inputRefs[d.name] = ref; 
       }} 
       defaultValue={d.name} 
      /> 
      </View> 
     ))} 
     <Button 
      onPress={this.onAddMore.bind(this)} 
      title="Add More" 
      color="#841584" 
     /> 
     <TextInput 
      multiline={true} 
      editable={false} 
      style={styles.info}> 
      {this.state.info} 
      </TextInput> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    paddingTop: Constants.statusBarHeight, 
    backgroundColor: '#F2F2F2', 
    }, 
    info: { 
    flex: 0.5, 
    }, 
    inputWrapper: { 
    backgroundColor: 'yellow', 
    marginTop: 5, 
    marignBottom: 5, 
    marginLeft: 5, 
    marginRight: 5, 
    }, 
    input: { 
    height: 55, 
    paddingLeft: 15, 
    paddingRight: 5, 
    paddingTop: 5, 
    paddingBottom: 5, 
    }, 
}); 

Answer 2

Versuchen ID für alle textinput

<TextInput 
    Id ="textInput1" placeholder = 'Please enter emailID.' 
    onSubmitEditing ={Keyboard.dismiss} 
    onChangeText = {this.handleAddMore} 
    autoCorrect = {false}/> 

In Verfahren geben -

handleAddMore = (e) =>{ 
    if (e.target.ID == 'textInput1') 
    //---------your code -------- 
} 

Answer 3

Pass name att Ribute in Texteingabe. In Zukunft werden müssen, wenn Sie Sie aktuelle Status Feld aktualisieren kann es so handhaben:

class MyComponent extends Component { 
state = { val1: '', val2: '' }; 

handleChange = e => this.setState({ [e.target.name]: e.target.value }); 

render(){ 
    const { val1, val2 } = this.state; 
    console.log(val1, val2); 
    return(
    <div> 
    <TextInput 
    name="val1" 
    value={val1} 
    placeholder = 'Please enter emailID.' 
    onSubmitEditing ={Keyboard.dismiss} 
    onChangeText = {this.handleChange} 
    autoCorrect = {false}/> 

    <TextInput 
    name="val2" 
    value={val2} 
    placeholder = 'Please enter emailID.' 
    onSubmitEditing ={Keyboard.dismiss} 
    onChangeText = {this.handleChange} 
    autoCorrect = {false}/> 
    </div>  
); 
} 
} 

Answer 4

hinzufügen name zu TextInputs

<TextInput 
    name='input1' 
    placeholder = 'Please enter emailID.' 
    onSubmitEditing ={Keyboard.dismiss} 
    onChangeText = {(e) => this.handleAddMore(e.target.name)} 
    autoCorrect = {false} 
/> 
<TextInput 
    name='input2' 
    placeholder = 'Please enter emailID.' 
    onSubmitEditing ={Keyboard.dismiss} 
    onChangeText = {(e) => this.handleAddMore(e.target.name)} 
    autoCorrect = {false} 
/> 

und definieren handleAddMore als:

handleAddMore = (name) =>{ 
    //add your code here 
}