Question

我是初学者。现在，我试图基于服务器数据添加动态TextInput，但我无法获取每个文本字段的数据。下面是我当前的代码

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

这不会“修复”文本更改时要调用的函数。换句话说，在此渲染周期lIndex中已经有一个固定值（最后一个输入的索引），每当在任何输入上调用onChangeText函数时，上面的行就会用{ {1}}的当前值，然后在重新渲染之后发生，因此仅最后一个输入字段会更改。

如何解决这个问题取决于您自己，我建议您使用另一种索引输入的方式，以便不对所有输入使用相同的变量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的值

2 个答案: