在本机反应中处理动态TextInput的值答案

【问题标题】：Handling Values of dynamic TextInput in react native在本机反应中处理动态TextInput的值
【发布时间】：2019-01-21 08:34:44
【问题描述】：

我是反应初学者。现在我正在尝试添加基于服务器数据的动态 TextInputs，我无法获取每个文本字段的数据。以下是我当前的代码

renderData() {
    var questionArray = getDataFromServer();

    var lIndex = -1;
    const views = questionArray.map((item, index) => {
      if (item === "__TEXT__") {
        lIndex++;
        return (
          <LineInput
            placeholder=""
            onChangeText={text => this.onTextChanged(lIndex, text)}
            value={this.state.otherText[lIndex]}
            key={index}
          />
        );
      }
      return <Text key={index}>{item + " "}</Text>;
    });
    return views;
  }


onTextChanged = (index, value) => {
    console.log("Text Index:" + index);
    const Textdata = [...this.state.otherText]; 
    Textdata[index] = value;

    this.setState(
      {
        otherText: Textdata
      },
      () => {
        console.log("Text data = " + this.state.otherText);
      }
    );
  };

这是我的 LineInput.js 文件

import React from "react";
import { View, StyleSheet, TextInput } from "react-native";

const LineInput = ({
  value,
  onChangeText,
  placeholder,
  secureTextEntry,
  keyboardType,
  autoCapitalize
}) => {
  return (
    <View style={styles.container}>
      <TextInput
        autoCorrect={false}
        onChangeText={onChangeText}
        placeholder={placeholder}
        style={styles.input}
        secureTextEntry={secureTextEntry}
        value={value}
        underlineColorAndroid="transparent"
        keyboardType={keyboardType}
        autoCapitalize={autoCapitalize}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    width: 150,
    borderColor: "black",
    borderBottomWidth: 1
  },
  input: {
    color: "black",
    width: "100%",
    height: "100%",
    backgroundColor: "white",
    fontSize: 14
  }
});

export { LineInput };

现在的问题是，无论我从哪个字段开始输入，所有数据都会在最后一个文本字段中输入。日志始终将 Text 索引显示为最后一个索引，并且在 Text 数据中，所有数据都在数组的最后一项中输入。我在这里做错了吗，如果是这样，解决这个问题的正确方法是什么。

【问题讨论】：

标签： react-native dynamic react-native-android react-native-ios textinput

【解决方案1】：

问题出在这一行

onChangeText={text => this.onTextChanged(lIndex, text)}

这不会“修复”文本更改时调用的函数。换句话说，在这个渲染周期中lIndex 已经有一个固定值（最后一个输入的索引），并且每当在任何输入上调用onChangeText 函数时，上面的行都会被解释为lIndex's当前值，然后重新渲染，因此只有最后一个输入字段发生变化。

如何解决这个问题取决于你自己，我建议使用另一种方法来索引你的输入，这样相同的变量 lIndex 不会用于所有输入，或者在调用之前强制重新渲染那个函数。

【讨论】：

我不知道如何做到这一点。你有什么建议吗？
当然，最简单的解决方案是在lindex++ 行下方添加var i = lindex，然后在以下行中使用i 而不是lindex。试试这个，让我知道它是否有效。
最好使用 questionArray 映射中的索引进行正确绑定。

【解决方案2】：

我认为这是最好的解决方案


import React, { Component } from 'react';
import { View, Text, TextInput } from 'react-native';

class Information extends Component {
  constructor(props) {
    super(props);
    this.state = {
      input: {
        name: null,
        address: null,
        school: null,
      },
    };
  }
//handle the text inputs in this format

handleText = (key, text) => {
    var input = { ...this.state.input };

    input[key] = text;
    console.log('INPUT', input);
    this.setState({ input });
  };
 render(){
  return (
      <View style={styles.container}>
        <TextInput
            placeholder='Hello'
            label='school'
            onChangeText={(text) => this.handleText('school', text)}
            value={this.state.input.school}
          />
          <TextInput
            placeholder='Hello'
            label='name'
            onChangeText={(text) => this.handleText('name', text)}
            value={this.state.input.name}
          />
          <TextInput
            placeholder='Hello'
            label='address'
            onChangeText={(text) => this.handleText('address', text)}
            value={this.state.input.address}
          />
    </View>
  )
 }
}

export default Information;

【讨论】：