保存 TextInput 数组的状态 - React Native

Posted

技术标签:

【中文标题】保存 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: 'test1@test.dk',

    to: ['<test@hotmail.com>'],

    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 不在状态,因为您遇到了状态问题。

以上是关于保存 TextInput 数组的状态 - React Native的主要内容,如果未能解决你的问题,请参考以下文章

无法为动态创建的 react-native TextInput 保存值

通过使用为textInput阵营本地更新在状态阵列对象的元素

可以在单个 TextInput 中保存多个值吗?

如何知道 TextInput 组件在 Flex 中是不是处于活动状态

如何在 React Native 中使用状态从 TextInput 获取值?

在 React Native 中从子组件 TextInput 更新父组件状态