以下是一个例子,展示了如何使用FlatList编辑一个项目并保存旧数据:
import React, { useState } from 'react';
import { View, FlatList, TextInput, Button } from 'react-native';
const App = () => {
const [data, setData] = useState([
{ id: '1', title: 'Item 1' },
{ id: '2', title: 'Item 2' },
{ id: '3', title: 'Item 3' },
]);
const [editedData, setEditedData] = useState(null);
const renderItem = ({ item }) => (
{editedData && editedData.id === item.id ? (
setEditedData({ id: item.id, title: text })
}
/>
) : (
{item.title}
在这个例子中,我们通过使用useState
钩子来管理数据和编辑状态。初始数据存储在data
数组中,每个项目都有一个唯一的id
和title
。编辑状态通过editedData
来管理,它存储当前正在编辑的项目。
renderItem
函数用于渲染每个项目。如果editedData
存在且editedData.id
与当前项目的id
匹配,则渲染一个带有TextInput
的视图,用于编辑项目标题。否则,渲染一个文本和一个编辑按钮。
编辑按钮的点击事件将当前项目的id
和title
存储到editedData
中。TextInput
的onChangeText
事件将当前输入的文本更新到editedData
中。
saveEditedData
函数用于保存编辑后的数据。它通过map
函数遍历data
数组,将正在编辑的项目替换为editedData
,然后使用setData
更新数据。最后,将editedData
设置为null
,以结束编辑状态。
在FlatList
之后的代码中,我们渲染一个保存按钮,当editedData
存在时才显示。点击保存按钮将触发saveEditedData
函数。
这个例子演示了如何使用FlatList
编辑项目并保存旧数据。您可以根据需要进行修改和扩展。