我有一個呈現多個帖子的平面串列，每個帖子都有一個文本部分，文本可能會變得非常大，所以我使用顯示更多方法來展開/隱藏文本，并且我正在使用狀態處理它的狀態，但是，當我單擊帖子以展開文本時，它會展開 Flatlist 中的所有帖子，我嘗試為每個帖子創建一個動態 Ref，但我無法找到相應更改文本內容的方法，任何我失蹤了？
這是我的代碼：
const [showMore, setShowMore] = useState(false);
const refs = useRef([]);
// Inside a Flatlist render item:
<View style={styles.postContainer}>
{item.data.postText.length > 120 ? (
showMore ? (
<TouchableOpacity onPress={() => setShowMore(!showMore)}
ref={(expandableText) => (refs.current[index] = expandableText)}>
<Text style={styles.postDescription}>{item.data.postText}</Text>
<Text style={styles.seeMore}>Show less</Text>
</TouchableOpacity>
) : (
<TouchableOpacity onPress={() => setShowMore(!showMore)}>
<Text style={styles.postDescription}>
{`${item.data.postText.slice(0, 120)}... `}
</Text>
<Text style={styles.seeMore}>Show more</Text>
</TouchableOpacity>
)
) : (
<Text style={styles.postDescription}>{item.data.postText}</Text>
)}
</View>uj5u.com熱心網友回復：
您對 的所有專案使用相同的狀態FlatList。因此，如果您更改狀態，所有專案都將被擴展。您可以將布爾陣列保留為狀態。此狀態陣列的索引對應于平面串列內的組件的索引。
// data is the data of your FlatList
// we use this to initialize each show more value with false
const [showMore, setShowMore] = useState(data.map(data => false))
在您的渲染功能中，您可以按如下方式使用它。
renderItem={({item, index}) => {
return <View style={styles.postContainer}>
{item.data.postText.length > 120 ? (
showMore[index] ? (
<TouchableOpacity onPress={() => handleShowMore(index)}
ref={(expandableText) => (refs.current[index] = expandableText)}>
<Text style={styles.postDescription}>{item.data.postText}</Text>
<Text style={styles.seeMore}>Show less</Text>
</TouchableOpacity>
) : (
<TouchableOpacity onPress={() => handleShowMore(index)}>
<Text style={styles.postDescription}>
{`${item.data.postText.slice(0, 120)}... `}
</Text>
<Text style={styles.seeMore}>Show more</Text>
</TouchableOpacity>
)
) : (
<Text style={styles.postDescription}>{item.data.postText}</Text>
)}
</View>
}
handleShowMore功能如下。
function handleShowMore(index) {
setShowMore(prev => prev.map((element, idx) => {
if(idx === index) {
return !element
}
return element
}))
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/469246.html
標籤：javascript 反应式 世博会 反应本机平面列表