reactjs - 如何将数据从 FlatList 访问到要在函数中使用的父组件

Question

我正在尝试从作为平面列表的子组件中访问codeandname值并访问父组件中的选择数据：

我的 flatList 如下，它包含一个子组件，它将在其上呈现项目。但是，但是我不确定，或者我使用了错误的方法

const CustomerView = ({ code, name, email, balance, buttonPress }: any) => {
  return (
    <View style={styles.body}>
      <TouchableOpacity onPress={buttonPress}>
        <Text>Code: {code}</Text>
        <Text>Name: {name}</Text>
        <Text>E-Mail: {email}</Text>
        <Text>Balance: {balance}</Text>
      </TouchableOpacity>
    </View>
  );
};

下面是我的 flatList 组件，它将在数据通过时呈现上述组件

const CustomerFlatList = ({
  customerData,
  onPressSelectCustomer,
}: any) => {
  return (
    <View style={styles.body}>
      <FlatList
        data={customerData}
        keyExtractor={(customerData) => customerData.code.toString()}
        //I need to access code and name in the parent component
        renderItem={({ item: { code, name, email, balance } }) => {
          return (
            <View>
              <CustomerView
                code={code}
                name={name}
                email={email}
                balance={balance}
                buttonPress={onPressSelectCustomer}
              />
            </View>
          );
        }}
      />
    </View>
  );
};

还有我的 home 组件，它应该被code, name传递以触发一个事件，其中数据正在传递

const SelectCustomerScreen = ({navigation}) => {
  const customers = useSelector((state: RootStateOrAny) => state.customers);

  const getCustomerDetails = (code, name) => {
      //navigation.navigate("orderScreen");
      console.log(code, name)
  }
  return (
    <View style={{ flex: 1 }}>
      <CustomerFlatList
        customerData={customers}
        doc_type={documentType}
        invoiceScreen={invoiceScreen}
        quotationScreen={quotationScreen}
        onPressSelectCustomer={getCustomerDetails}
      />
    </View>
  );
};

标签： reactjstypescriptreact-native