如何在一個處理程序中處理多個更改事件？

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