我有一个主要组件，它有两个子组件，一个flat list和一个button group组件（来自react-native-elements）。
我想flat list在用户点击其中一个button group选项时更新数据，但是，我无法真正弄清楚这一点，我尝试使用回调，但是无法真正理解它们的工作原理，因此不适用于我。这是我的主要组成部分：
return (
<SafeAreaView style={styles.homeContainer}>
<View style={{flex: 1}}>
<View style={styles.headerContainer}>
<View
style={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
}}>
<Text style={styles.title}>Groups</Text>
<Avatar
rounded
source={{
uri: profilePhotoURL,
}}
/>
</View>
<Text style={styles.subtitle}>Find people to learn with</Text>
</View>
<OptionChooser /> {/** <---- this is the button group component*/}
<FlatList
data={meetings}
renderItem={({item}) => (
<TouchableOpacity
style={styles.cardButton}
onPress={() =>
navigation.navigate('MeetingDetails', {meeting: item})
}>
<MeetingCard meetingModel={item} style={{flex: 1}} />
</TouchableOpacity>
)}
keyExtractor={(item) => item.id!}
showsVerticalScrollIndicator={false}
/>
</View>
<FloatingButton onPress={() => navigation.navigate('AddMeeting')} />
</SafeAreaView>
);
这是我的按钮组（OptionChooser）组件：
const OptionChooser = () => {
const [selectedIndex, setSelectedIndex] = useState<number>(0);
const buttons = ['All', 'Today', 'This week'];
const updateIndex = (index) => {
setSelectedIndex(index);
console.log(index);
};
return (
<View style={styles.buttonGroupContainer}>
<ButtonGroup
onPress={updateIndex}
selectedIndex={selectedIndex}
buttons={buttons}
containerStyle={{height: 44, borderRadius: 4}}
selectedButtonStyle={{backgroundColor: '#8BCFB0'}}
/>
</View>
);
};
我的目标是在updateIndex调用时OptionChooser更新flat list父组件中的。
如您所说，在这种情况下，回调将是最简单的选择。
让我们从您的父组件开始。假设您有两个状态变量会议，selectedIndex
使子组件变得笨拙并管理父组件中的状态而不是同时管理两者中的状态始终是一个好主意。
您的父级将具有setSelectedIndex，它将更新父级selectedIndex状态。
所以您将状态和功能传递给孩子，如下所示
<OptionChooser selectedIndex={selectedIndex} setSelectedIndex={setSelectedIndex}/>
您的子组件必须像这样
const OptionChooser = ({selectedIndex,setSelectedIndex}) => {
const buttons = ['All', 'Today', 'This week'];
return (
<View style={styles.buttonGroupContainer}>
<ButtonGroup
onPress={setSelectedIndex}
selectedIndex={selectedIndex}
buttons={buttons}
containerStyle={{height: 44, borderRadius: 4}}
selectedButtonStyle={{backgroundColor: '#8BCFB0'}}
/>
</View>
);
};
在渲染中，您可以使用如下所示的状态简单地过滤会议
<FlatList data={meetings.filter(x=>x.type==selectedIndex)} ...
//实际情况可能会根据您的需要而有所不同。
因此，无论您的孩子何时更改，更改都会反映在父级中。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句