Save value of textInputs on call function React-Native

Question

I am fetching some TextInputs from an API and pushing them to an Array. Then I am saving the input text from user and all keys and values that a textinput object has. However, when I save, it saves every time I make a change on the text. I want to save and push everything to the array when I call a function further down in View. Basically, I want the state to be pushed to array only once I call a function, not every time I change text.

I appreciate any suggestion! Please let me know if the question is not clear enough.

myInputFields = {
   myTextFields: [],
};

textfieldsObject = () => {
const obje = this.props.navigation.state.params.item;
var keyvalue_to_json = JSON.parse(obje.keyValues);
var foundTextFields = [];

for (let i = 0; i < keyvalue_to_json.inputFields.length; i++) {
  if (keyvalue_to_json.inputFields[i].type === 'textfield') {
    foundTextFields.push(<TextInput style={{ borderWidth: 1 }}

      onChangeText={(text) => {
        keyvalue_to_json.inputFields[i].inputValues = text;
        this.myInputFields.myTextFields.push(keyvalue_to_json.inputFields[i])
      }}
    >{keyvalue_to_json.inputFields[i].placeholderText}</TextInput>)</Text>)
  }
}

}

score 0 · Accepted Answer · answered Mar 24 '19 at 05:19

0

onChangeText event will be invoked every time when you type or change text. You need to use onEndEditing event which is triggered only when the text input ends. So your TextInput code will be:

<TextInput style={{ borderWidth: 1 }}
  onEndEditing={(e) => {
    keyvalue_to_json.inputFields[i].inputValues = e.nativeEvent.text;
    this.myInputFields.myTextFields.push(keyvalue_to_json.inputFields[i])
  }}
>{keyvalue_to_json.inputFields[i].placeholderText}
</TextInput>

answered Mar 24 '19 at 05:19

Harikrishnan

9,688
11
84
127

It works in a way. If I write some thing in textinputs, and print them, it prints all textinputs once only, so that's good. But when I try to change the value in a text input before calling the other function, it prints that textinput's object twice, because I made changes in that twice. How can I stop it doing that? – showtime Mar 24 '19 at 15:49
Do you have a solution to that problem? – showtime Mar 25 '19 at 15:50
Will you respond to my question? – showtime Mar 26 '19 at 10:17
Please do it asap, I really need it! :( – showtime Mar 26 '19 at 13:02
You need to write logic to avoid duplicate. Make `myTextFields` as a key value pair (object). If key doesn't exist, add it. If exists, replace it with new value. – Harikrishnan Mar 27 '19 at 03:54

Save value of textInputs on call function React-Native

1 Answers1