我有兩個不同的組件“主頁”和“ListItemCA”
在主頁中，我有一個FlatList和一個模態彈出視窗
<FlatList
data={ listData}
keyExtractor={list => list.Title}
renderItem={({ item }) => <ListItemCA data={item} onLongPress={openModal} />}
/>
并且每個串列項都從另一個組件ListItemCA呼叫
function ListItemCA({data, onLongPress}) {
return (
<TouchableOpacity onLongPress={onLongPress} >
<View style={styles.container}>
<Text style={styles.title}>{data.Title}</Text>
<View style={styles.metaContainer}>
<Text style={styles.meta}>{( data.totalMonths != null ? data.totalMonths : '0' )} Months</Text>
<Text style={styles.meta}>{( data.members != null ? data.members.length : '0' )} Members</Text>
</View>
</View>
</TouchableOpacity>
);
}
我想達到什么目的？
我想在我的 HomePage 組件上獲取選定的串列項標題。當用戶長按串列項時，該標題應顯示在模態彈出視窗中。如何使用 longpress 將選定的串列項標題傳遞給 HomePage 組件？
uj5u.com熱心網友回復：
如果您的目標是在模態中顯示長按專案的資料，您可以將資料添加為openModal函式的引數：
function openModal(data) {
// your function
return (
<Text>{data.Title}</Text>
)
}
然后，在您的 中FlatList，修改 的道具ListItemCA以呼叫openModal所選專案：
renderItem={({ item }) => <ListItemCA data={item} onLongPress={openModal(item)} />}
如果您還想將HomePage組件中長按專案的資料保存為其他用途，您可以將其保存在狀態中。在您的HomePage組件中：
import React, { useState } from 'react'
function HomePage() {
const [itemData, setItemData] = useState()
// your code
}
然后，在您的flatlist：
<FlatList
data={listData}
keyExtractor={list => list.Title}
renderItem={({ item }) =>
<ListItemCA
data={item}
onLongPress={ () => {
setItemData(item)
openModal(item)
}}
/>
}
/>
uj5u.com熱心網友回復：
您可以通過像這樣從組件中傳遞（回傳）引數來實作這一點 -
function ListItemCA({data, onLongPress}) {
return (
<TouchableOpacity onLongPress={() => {
onLongPress(data.Title);
//return data.Title when onLongPressed clicked
}}>
<View style={styles.container}>
...
</View>
</TouchableOpacity>
);
}
然后將其放入道具中 -
<FlatList
data={listData}
keyExtractor={list => list.Title}
renderItem={({ item }) =>
<ListItemCA
data={item}
onLongPress={(title) => {//this **title** return from **onLongPress(data.Title)**
openModal();
setTitle(title);// or directly can pass that title in openModal func.
}}
/>
}
/>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/363050.html