有没有办法从 React Native 中的另一个组件获取所选项目的标题

Question

我有两个不同的组件“HomePage”和“ListItemCA”

在主页中，我有一个 FlatList 和一个模态弹出窗口

<FlatList
data={ listData}
keyExtractor={list => list.Title}
renderItem={({ item }) => <ListItemCA data={item} onLongPress={openModal} />} 
/>

并且每个列表项都是从另一个组件调用的 ListItemCA

function ListItemCA({data, onLongPress}) {

    return (
        <TouchableOpacity onLongPress={onLongPress} >
        <View style={styles.container}>
            <Text style={styles.title}>{data.Title}</Text>
            <View style={styles.metaContainer}>
                <Text style={styles.meta}>{( data.totalMonths != null ? data.totalMonths : '0' )} Months</Text>
                <Text style={styles.meta}>{( data.members != null ? data.members.length : '0' )} Members</Text>
            </View>
        </View>
        </TouchableOpacity>
    );
}

我想达到什么目的？

我想在我的主页组件上获取选定的列表项标题。当用户长按列表项时，该标题应显示在模式弹出窗口中。如何使用长按将选中的列表项标题传递给主页组件？

Answer 1

如果您的目标是在模式中显示来自长按项目的数据，您可以将数据添加为 openModal 函数的参数：

function openModal(data) {
    // your function
    return (
        <Text>{data.Title}</Text>
    )
}

然后，在你的FlatList中，修改ListItemCA的道具，为所选项目调用openModal：

renderItem={({ item }) => <ListItemCA data={item} onLongPress={openModal(item)} />}

如果您还想将长按项目的数据保存在 HomePage 组件中用于其他用途，您可以将其保存在状态中。在您的 HomePage 组件中：

import React, { useState } from 'react'

function HomePage() {
    const [itemData, setItemData] = useState()

    // your code
}

然后，在您的 flatlist:

<FlatList
        data={listData}
        keyExtractor={list => list.Title}
        renderItem={({ item }) => 
            <ListItemCA 
                data={item} 
                onLongPress={ () => {
                    setItemData(item)
                    openModal(item)
                }} 
            /> 
        }
    />

Answer 2

你可以通过从你的组件传递（return）参数来实现这个 -

function ListItemCA({data, onLongPress}) {
    return (
      <TouchableOpacity onLongPress={() => {
        onLongPress(data.Title);
        //return data.Title when onLongPressed clicked
      }}>
        <View style={styles.container}>
          ...
        </View>
      </TouchableOpacity>
    );
}

然后在道具中获取-

<FlatList
   data={listData}
   keyExtractor={list => list.Title}
   renderItem={({ item }) =>
      <ListItemCA
        data={item}
        onLongPress={(title) => {//this **title** return from **onLongPress(data.Title)**
          openModal();
          setTitle(title);// or directly can pass that title in openModal func.
        }}
      />
   } 
/>

有没有办法从 React Native 中的另一个组件获取所选项目的标题

Is there a way to get the Title of the selected item from another component in React Native

react-native

mobile

react-component