在 react native 中处理动态文本输入的值

Question

我是初学者。现在我正在尝试根据服务器数据添加动态文本输入，我在获取每个文本字段的数据时遇到问题。下面是我当前的代码

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

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

Answer 1

问题出在这一行

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

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

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

Answer 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;