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

【问题标题】：Is there a way to get the Title of the selected item from another component in React Native有没有办法从 React Native 中的另一个组件获取所选项目的标题
【发布时间】：2021-11-21 15:48:49
【问题描述】：

我有两个不同的组件“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>
    );
}

我想达到什么目标？

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

【问题讨论】：

标签： react-native mobile react-component

【解决方案1】：

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

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

然后，在你的FlatList 中，修改ListItemCA 的props 为选中的项目调用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)
                }} 
            /> 
        }
    />

【讨论】：

【解决方案2】：

您可以通过像这样从组件传递（返回）参数来实现这一点 -

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

然后在 props 中获取 -

<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.
        }}
      />
   } 
/>

【讨论】：

谢谢伙计！它有效。