要编辑FlatList的每个项的状态,可以使用state来管理每个项的状态。以下是一个示例代码,展示了如何编辑FlatList的每个项的状态:
import React, { useState } from 'react';
import { FlatList, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
const App = () => {
const [data, setData] = useState([
{ id: '1', title: 'Item 1', isEditing: false },
{ id: '2', title: 'Item 2', isEditing: false },
{ id: '3', title: 'Item 3', isEditing: false },
]);
const toggleEditing = (itemId) => {
setData((prevData) => {
return prevData.map((item) => {
if (item.id === itemId) {
return { ...item, isEditing: !item.isEditing };
}
return item;
});
});
};
const renderItem = ({ item }) => {
return (
{item.isEditing ? (
{item.title}
) : (
{item.title}
)}
toggleEditing(item.id)}>
{item.isEditing ? 'Save' : 'Edit'}
);
};
return (
item.id}
/>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 40,
paddingHorizontal: 20,
},
item: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: 10,
},
normalText: {
fontSize: 16,
},
editingText: {
fontSize: 16,
fontWeight: 'bold',
},
buttonText: {
fontSize: 14,
color: 'blue',
},
});
export default App;
在上面的代码中,data数组存储了每个项的数据,包括id、title和isEditing属性。isEditing属性用于标记项是否处于编辑状态。toggleEditing函数用于切换项的编辑状态。当点击编辑按钮时,会调用toggleEditing函数,并更新对应项的isEditing属性。
在renderItem函数中,根据项的isEditing属性来决定显示的文本样式和按钮文本。如果项的isEditing为true,则显示加粗的文本和"Save"按钮;否则,显示普通文本和"Edit"按钮。
最后,将FlatList组件渲染到视图中,并传递data、renderItem和keyExtractor作为参数。
上一篇:编辑flask相对路径