长按平面列表中的项目时更改状态(功能组件)

Question

我有两个不同的功能组件；一个渲染平面列表(网格(，另一个在平面列表renderItem(项(中渲染。网格有一个名为FanMenuState的状态，当平面列表中的项目被长按时，我该如何更改状态？我到处找，似乎找不到解决方案

function Grid ({data, title}){

const [fanMenuState, setFanMenuState] = React.useState(false);
return(
<View style={styles.voltyGrid}>
<FlatList
showsVerticalScrollIndicator ={false}
ListHeaderComponent={()=>
<View style={styles.Underline}> 
<Text style={styles.introText}>{title}</Text>
</View>
}
numColumns={1}
contentContainerStyle={styles.voltyItem}
data={data}
renderItem={({item}) => <Item title={item.title} thumbnail={item.thumbnail}/>}
keyExtractor={item => item.id}
scrollEnabled={!fanMenuState}

/>
</View>      
)
}

这是平面列表中渲染的第二个函数Item。

function Item({ title, thumbnail}) {
handleLongPress = (event) => {

const posY = event.nativeEvent.pageY;
const posX = event.nativeEvent.pageX;
console.log(posX)
//fanMenu(posY, posX)
};
return(
<TouchableOpacity  onLongPress={event => handleLongPress(event)}>

<View style={styles.container}>
<View style={styles.thumbnail}>
<Image style={styles.thumbnail} source={{uri: thumbnail}}/> 
</View>
<View style={styles.info}>
<View style={styles.authorContainer}>
<Text style={styles.source}>James Dean</Text>
<Text style={styles.length}>4 mins</Text>
</View>
<View>
<Text style={styles.title}>{ title }</Text>
<Text style={styles.description}>This is the description which could be quite long and explains the content like really long</Text>
</View>  
<View style={styles.controlBar}>
<TouchableOpacity style={styles.controlBarItem}>
<Image style={styles.controlBarItemIcon} source={require('../../Resources/Icons/Like/likeIcon.png')}/>
<Text style={styles.controlBarItemText} >0</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.controlBarItem}>
<Image style={styles.controlBarItemIcon} source={require('../../Resources/Icons/Comment/Comment.png')}/>
<Text style={styles.controlBarItemText} >0</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.controlBarItem}>
<Image style={styles.controlBarItemIcon} source={require('../../Resources/Icons/Share/Share.png')}/>
<Text style={styles.controlBarItemText} >0</Text>
</TouchableOpacity>
</View>
</View>
</View>

</TouchableOpacity>

);
}

非常感谢您的帮助！如果您需要更多信息，只需询问：(

Answer 1

尝试这种方式

function Grid ({data, title}){

const [fanMenuState, setFanMenuState] = React.useState(false);
const onChangeState = (data) => {
console.log(data);
fanMenuState(…); // change state here …
}
return(
<View style={styles.voltyGrid}>
<FlatList
……            
renderItem={({item}) => 
<Item 
title={item.title} 
thumbnail={item.thumbnail} 
onChangeState={onChangeState} //set prop `onChangeState` callback here
/>
}
……
/>
</View>      
)
}

// Item.js
function Item({ title, thumbnail, onChangeState}) {
const handleLongPress = (event) => {

const posY = event.nativeEvent.pageY;
const posX = event.nativeEvent.pageX;
console.log(posX);
//fanMenu(posY, posX)
// call here  like
const data = { posX , posX }
onChangeState(data);
};
return(
<TouchableOpacity  onLongPress={event => handleLongPress(event)}>
…..
</TouchableOpacity>

);
}