Обработка значений динамического TextInput в реагировать родной - PullRequest
Новая
       22

Обработка значений динамического TextInput в реагировать родной

0 голосов
/ 21 января 2019

Я новичок, чтобы реагировать.Сейчас я пытаюсь добавить динамические 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 };

Теперь проблема не в том, в какое поле я начинаю печатать, все данные вводятся в последний разтекстовое поле.В журнале всегда отображается текстовый индекс как последний индекс, а в текстовых данных все данные заносятся в последний элемент массива.Я делаю что-то здесь не так, если так, каков будет правильный подход к этому.

1 Ответ

0 голосов
/ 21 января 2019

Проблема в этой строке 

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

Это не «исправляет» функцию, вызываемую при изменении текста. Другими словами, в этом цикле рендеринга lIndex уже имеет фиксированное значение (индекс последнего входа), и всякий раз, когда функция onChangeText вызывается для любого из входов, строка выше интерпретируется с lIndex. текущее значение, и повторное рендеринг происходит позже, следовательно, изменяется только последнее поле ввода.

Как вы решите эту проблему, зависит от вас, я бы предложил использовать другой способ индексации ваших входных данных, чтобы одна и та же переменная lIndex не использовалась для всех, или принудительное повторное рендеринг перед вызовом эта функция.

...