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

时间:2020-08-19 02:27:15

标签: reactjs typescript react-native

我正在尝试从子组件(它是一个平面列表)中访问codename值,并访问父组件中的选择数据:

我的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>
  );
};

0 个答案:

没有答案