Question

我有一个主要组件，它有两个子组件，一个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。

Answer 1

正如您所说的，在这种情况下，回调是最简单的选择。

让我们从父组件开始。假设您有两个状态变量会议，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)} ...

//实际情况可能会根据您的需要而变化。

因此，无论何时您的孩子进行更改，更改都会反映在父级中。

子组件更新时更改父状态

1 个答案: