在React Native中保存TextInput数组的状态的解决方法可以使用useState钩子来实现。以下是一个包含代码示例的解决方案:
import React, { useState } from 'react';
import { View, TextInput, Button } from 'react-native';
const App = () => {
const [inputs, setInputs] = useState([{ value: '' }]);
const handleInputChange = (text, index) => {
const newInputs = [...inputs];
newInputs[index].value = text;
setInputs(newInputs);
};
const addInput = () => {
setInputs([...inputs, { value: '' }]);
};
const saveInputs = () => {
// 在这里保存输入的文本数组
console.log(inputs);
};
return (
{inputs.map((input, index) => (
handleInputChange(text, index)}
/>
))}
);
};
export default App;
在上面的示例中,我们使用useState钩子来创建一个inputs
状态,其中包含一个对象数组。每个对象都有一个value
属性,用于保存TextInput的文本值。
handleInputChange
函数用于更新inputs
状态中特定索引的对象的value
属性。
addInput
函数用于向inputs
状态中添加一个新的对象。
saveInputs
函数用于保存输入的文本数组,可以在此函数中将其发送给服务器或进行其他操作。
在组件的返回部分,我们使用inputs.map
方法来渲染TextInput组件的数组,并将每个TextInput的值和handleInputChange
函数与onChangeText
属性关联。
最后,我们还添加了两个按钮,一个用于添加新的TextInput,另一个用于保存输入的文本数组。
请注意,此解决方案使用了函数组件和React Hooks。如果您使用的是旧版本的React Native,可以将上述代码转换为基于类的组件,并使用this.state
和this.setState
来管理状态。