保存 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 组件在 Flex 中是不是处于活动状态