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

【问题标题】：How to handle multiple change events in one handler?如何在一个处理程序中处理多个更改事件？
【发布时间】：2017-04-15 18:35:43
【问题描述】：

我正在收听视图中三个输入的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',
  },
});

问题：

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

【问题讨论】：

标签： javascript reactjs onchange

【解决方案1】：

因为你用错了顺序，所以这样使用：

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

你也可以这样写，为 Input 元素定义一个name 属性，然后通过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);
}

【讨论】：