Comment gérer plusieurs événements de modification dans un gestionnaire?

Question

J'écoute le onChangeText de trois entrées dans une vue. Mais au lieu d'utiliser trois gestionnaires distincts onChangeText. Je voudrais passer dans le nom de l'état d'entrée de l'entrée pour le gestionnaire et lui faire définir l'état de cela.

J'ai essayé cet exemple mais e.target.value renvoie undefined. En passant dans le name comme second paramètre et e comme le pointeur sur l'élément:

import React, { Component } from 'react'; 
import { View, StyleSheet, Alert, Image, TextInput } from 'react-native'; 
import { Constants } from 'expo'; 

export default class App extends Component { 
    state = { 
    setValue: 0, 
    travelValue: 0, 
    runValue: 0 

    }; 


    _handleTextChange (e, name) { 
     var change = {}; 
     change[name] = e.target.value; 
     this.setState(change); 
    } 


    render() { 
    return (
     <View style={styles.container}> 


     <TextInput 
      value={this.state.setValue} 
      keyboardType = 'numeric' 
      onChangeText={this._handleTextChange.bind(this, 'setValue')} 
      style={{ width: 200, height: 44, padding: 8 }} 
     /> 
     <TextInput 
      value={this.state.travelValue} 
      keyboardType = 'numeric' 
      onChangeText={this._handleTextChange.bind(this, 'travelValue')} 
      style={{ width: 200, height: 44, padding: 8 }} 
     /> 
     <TextInput 
      value={this.state.runValue} 
      keyboardType = 'numeric' 
      onChangeText={this._handleTextChange.bind(this, 'runValue')} 
      style={{ width: 200, height: 44, padding: 8 }} 
     /> 

     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    alignItems: 'center', 
    justifyContent: 'space-between', 
    paddingTop: Constants.statusBarHeight, 
    paddingBottom: '20%', 
    backgroundColor: '#ecf0f1', 
    }, 
}); 

Question:

Comment pouvez-vous gérer plusieurs événements de changement dans un gestionnaire?

Answer 1

Parce que vous avez utilisé dans le mauvais ordre, l'utiliser comme ceci:

_handleTextChange (name, e) { //first name then event 
    var change = {}; 
    change[name] = e.target.value; 
    this.setState(change); 
} 

Vous pouvez l'écrire comme ça aussi, définir une propriété name à l'élément d'entrée l'accès alors que name par e.target.name, comme ceci:

<TextInput 
    value={this.state.setValue} 
    name='setValue' 
    onChangeText={this._handleTextChange} 
    .... 

Bind le _handleTextChange function dans le constructor:

this._handleTextChange = this._handleTextChange.bind(this); 

Utilisez le _handleTextChange comme ceci:

_handleTextChange(e){ 
     var change = {}; 
     change[e.target.name] = e.target.value; 
     this.setState(change); 
}