[英]How to remove data from Flatlist using deleted icon in react native
function Three({ navigation, route }) {
const Data = [
{
id: route.params.paramKey,
name: route.params.paramKey1,
note: route.params.paramKey2,
desc: route.params.paramKey3,
}
];
const Delete=()=>{
setInfo("")
}
const renderItem = ({ item }) => (
<View style={{ backgroundColor: 'yellow', height: 160, width: 350, borderRadius: 15, paddingLeft: 10, marginTop: 30, marginLeft: 10 }}>
<Text style={{ color: 'black', fontSize: 20 }}>selected Date:
<Text style={{ color: 'green', fontWeight: 'bold' }}>{route.params.paramKey}</Text>
</Text>
<Text style={{ color: 'black', fontSize: 20 }}>
<Text style={{ color: 'green', fontWeight: 'bold' }}>{route.params.paramKey1}</Text>
</Text>
<Text style={{ color: 'black', fontSize: 20 }}>Note Title:
<Text style={{ color: 'green', fontWeight: 'bold' }}> {route.params.paramKey2}</Text>
</Text>
<Text style={{ color: 'black', fontSize: 20 }}>Note Description:
<Text style={{ color: 'green', fontWeight: 'bold' }}>{route.params.paramKey3}</Text>
</Text>
<TouchableOpacity
onPress={()=>Delete()}
style={{marginLeft:310,marginTop:15}}
>
<Icon name="trash" size={30} color="red"/>
</TouchableOpacity>
</View>
);
return (
<SafeAreaView style={{ flex: 1 }}>
<FlatList
data={Data}
renderItem={renderItem}
keyExtractor={item => item.id}
/>
</SafeAreaView >
);
}
export default Home;
我想要這樣
如果我單擊刪除圖標,此平面列表數據將從屏幕上刪除
我正在使用路由將一頁的值傳遞給另一頁
我不明白如何從中刪除我可以做的項目但是
它不工作
那我該怎么做
您需要做一些事情。
第一個,使用useState
來處理數據。 改變這個:
const Data = [
{
id: route.params.paramKey,
name: route.params.paramKey1,
note: route.params.paramKey2,
desc: route.params.paramKey3,
}
];
對此:
const [data, setData] = useState([
{
id: route.params.paramKey,
name: route.params.paramKey1,
note: route.params.paramKey2,
desc: route.params.paramKey3,
},
]);
第二個是,刪除時更改state。
const Delete = (index) => {
setData((prev) => {
prev.splice(index, 1);
return [...prev];
});
};
最后,為函數輸入添加索引,並將Data
重命名為FlatList
中的data
。
這是完整的例子:
function Three({ navigation, route }) {
const [data, setData] = useState([
{
id: route.params.paramKey,
name: route.params.paramKey1,
note: route.params.paramKey2,
desc: route.params.paramKey3,
},
]);
const Delete = (index) => {
setData((prev) => {
prev.splice(index, 1);
return [...prev];
});
};
const renderItem = ({ item, index }) => (
<View
style={{
backgroundColor: 'yellow',
height: 160,
width: 350,
borderRadius: 15,
paddingLeft: 10,
marginTop: 30,
marginLeft: 10,
}}
>
<Text style={{ color: 'black', fontSize: 20 }}>
selected Date:
<Text style={{ color: 'green', fontWeight: 'bold' }}>
{route.params.paramKey}
</Text>
</Text>
<Text style={{ color: 'black', fontSize: 20 }}>
<Text style={{ color: 'green', fontWeight: 'bold' }}>
{route.params.paramKey1}
</Text>
</Text>
<Text style={{ color: 'black', fontSize: 20 }}>
Note Title:
<Text style={{ color: 'green', fontWeight: 'bold' }}>
{' '}
{route.params.paramKey2}
</Text>
</Text>
<Text style={{ color: 'black', fontSize: 20 }}>
Note Description:
<Text style={{ color: 'green', fontWeight: 'bold' }}>
{route.params.paramKey3}
</Text>
</Text>
<TouchableOpacity
onPress={() => Delete(index)}
style={{ marginLeft: 310, marginTop: 15 }}
>
<Icon name="trash" size={30} color="red" />
</TouchableOpacity>
</View>
);
return (
<SafeAreaView style={{ flex: 1 }}>
<FlatList
data={data}
renderItem={renderItem}
keyExtractor={(item) => item.id}
/>
</SafeAreaView>
);
}
export default Home;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.