保存 TextInput 数组的状态 - React Native

Posted 2023-02-22

【中文标题】保存 TextInput 数组的状态 - React Native

【英文标题】：Save state of TextInput array - React Native

【发布时间】：2019-08-12 10:17:46

【问题描述】：

我从 API 获取多个 TextInput 并将它们显示在我的屏幕上。那么，如何将用户输入的状态保存到全局对象中。像这样的：

    state = 
    foundtextfields: []
   

在这里，我将那些获取的 TextInputs 推送到 foundTextFields[] 数组：

var foundTextFields = [];

    foundTextFields.push(<TextInput>keyvalue_to_json.inputFields[i].placeholderText</TextInput>)

我在此列表中显示文本输入：

return (
    <View>
      foundtextfields
    </View>
)

编辑： 我想遍历数组的状态，并从那个 ex 中提取密钥。 “key”（signedbyFullName）如果与下面的 json 正文属性“signedbyFullName”相同，则匹配。

  postToBmp = (obje) => 
var userArray = [];
for (i = 0; i < this.myInputFields.myTextFields.length; i++) 
       userArray.push(this.myInputFields.myTextFields[i])
       console.log("this is the title of al inputFields:",   this.myInputFields.myTextFields[i].key)


fetch('URL', 
  method: 'POST',
  headers: 
    Accept: 'application/json',
    'Content-Type': 'application/json',
    'Connection': 'Keep-Alive',
  ,
  credentials: 'include',

  body: JSON.stringify(

    from: '[e-mail]',

    to: ['<[e-mail]>'],

    signedByFullName: '',

    signedByCPRNumber: '',

    otherCompanyName: '',

    otherCompanyCVRNumber: ''
  )
)

【问题讨论】：

有什么问题可以显示TextInputs 还是只需要帮助来存储值？

@MPN7 我只需要帮助来存储这些值。事实上，我尝试用这个来存储值：this.state.foundtextfields.push(...) 并调用视图 this.state.foundtextfields。它以这种方式工作，但我使用的是模态，每当我切换它时，文本输入都会重复。我不知道为什么！

你在哪里做这个this.state.foundtextfields.push(…)？如果您在 Modal 中进行操作，则它自身重复是正常的

@MPN7 Nono 模态在另一个函数的返回视图中。尽管如此，它为什么这样做是没有意义的。似乎每次我切换 Modal 时，它都会刷新页面，因此我的 fetch() 再次调用数据 + 已经保存在状态中的数据，因此它们显示的太多了。

【参考方案1】：

要存储值，您可以在 foundtextfields 旁边创建一个带有值的数组，每次更改文本时，您都将其设置为另一个数组的索引 像这样：

    foundTextFields.push(
      <TextInput 
         onChangeText=(text) =>
            let inputValues=this.state.inputValues;
            inputValues[i]=text;
            this.setState(inputValues)
         >
        keyvalue_to_json.inputFields[i].placeholderText
      </TextInput>)

或

foundTextFields.push(
      <TextInput 
         onChangeText=(text) =>
            keyvalue_to_json=this.state.keyvalue_to_json
            keyvalue_to_json.inputFields[i].inputValues=text;
            this.setState(keyvalue_to_json)
         >
        keyvalue_to_json.inputFields[i].placeholderText
      </TextInput>)

【讨论】：

如果我想遍历State中的那个数组，如何识别每个值属于哪个TextInput？

循环遍历您的 API 数组 keyvalue_to_json.inputFields，输入的值与该数组在同一索引中。如果这让您感到困惑，请参阅编辑我将输入值设置为keyvalue_to_json.inputFields，因此它具有所有值

因为您没有在任何地方初始化 inputFields，也没有设置状态。

也许你误会了。我想从另一个函数循环遍历该数组的状态。我有一个名为 postToApi() 的函数，我想在那里循环状态。检查已编辑的问题。

我不确定我是否理解，但让我解释一下：第二种方法使用来自您的 api 调用的数组 json 的变量。从您提供的代码中，我相信您正在执行一个循环，并且为keyvalue_to_json.inputFields 的每个元素创建一个新的 inputBox，因此我没有创建一个新变量，而是将输入的值设置为原始的 api 变量 (keyvalue_to_json.inputFields )，我没有设置状态，因为我认为 keyvalue_to_json.inputFields 不在状态，因为您遇到了状态问题。