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

Question

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

我试过这个例子，但是 e.target.value returns 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 属性到Input元素然后通过e.target.name访问那个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);
}