如何在一个处理程序中处理多个更改事件？

Question

我在一个视图中监听三个输入的onChangeText。但不是使用三个单独的处理器onChangeText。我想将输入的输入状态名称传递给处理程序，并从中设置状态。

我试过这个例子，但e.target.value返回undefined。在name作为第二个参数和e传递的指针元素：

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

问题：在一个处理器

你怎么能处理多个更改事件？

Answer 1

因为你在错误的顺序使用，使用这样的：

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

你可以把它写这样也定义一个name属性输入元素，然后访问name由e.target.name，就像这样：

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

Bind的_handleTextChange function在constructor：

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

使用_handleTextChange这样的：

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