在调用函数 React-Native 时保存 textInputs 的值

Question

我正在从 API 中获取一些 TextInputs 并将它们推送到数组中。然后我保存来自用户的输入文本以及 textinput 对象具有的所有键和值。但是，当我保存时，每次我对文本进行更改时它都会保存。当我在 View 中进一步调用函数时，我想保存所有内容并将其推送到数组。基本上，我希望仅在调用函数时将状态推送到数组，而不是每次更改文本时。

感谢任何建议！如果问题不够清楚，请告诉我。

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

}

Answer 1

onChangeText event will be invoked every time when you type or change text. You need to use onEndEditing 文本输入结束时触发的事件。所以你的 TextInput 代码将是：

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

在调用函数 React-Native 时保存 textInputs 的值

Save value of textInputs on call function React-Native

state

textinput

react-native