在 React Native 中处理动态 TextInput 的值

Question

我是反应初学者。现在我正在尝试添加基于服务器数据的动态 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 数据中，所有数据都进入数组的最后一项。我是不是做错了什么，如果是，正确的处理方法是什么。

Answer 1

问题出在这一行

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

这不是 "fix" 文本更改时调用的函数。换句话说，在这个渲染周期中 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;

在 React Native 中处理动态 TextInput 的值

Handling Values of dynamic TextInput in react native

dynamic

textinput

react-native

react-native-android

react-native-ios