React Native 长按列表项时如何从子组件获取选中项Title并传给父组件

你可以通过回调传参的方式实现需求，以下是具体实现步骤，两种方案任选其一即可： #

方案1：父组件层绑定参数 #

直接在HomePage的FlatList渲染时，把当前列表项的标题绑定到openModal回调中：

1. 首先在HomePage中新增状态存储选中的标题，调整openModal函数接收参数

import { useState } from 'react';

function HomePage() {
  // 存储选中的列表项标题
  const [selectedTitle, setSelectedTitle] = useState('');
  // 模态框显示状态（已有则忽略）
  const [modalVisible, setModalVisible] = useState(false);

  const openModal = (title) => {
    setSelectedTitle(title);
    setModalVisible(true); // 原有打开模态框的逻辑
  };

  // 其余原有逻辑...

  return (
    <>
      <FlatList
        data={listData}
        keyExtractor={list => list.Title}
        {/* 渲染时把当前item的Title传给openModal */}
        renderItem={({ item }) => <ListItemCA data={item} onLongPress={() => openModal(item.Title)} />} 
      />
      {/* 模态框中直接展示selectedTitle即可 */}
      <Modal visible={modalVisible}>
        <Text>选中标题：{selectedTitle}</Text>
      </Modal>
    </>
  )
}

该方案不需要修改子组件ListItemCA的代码。 #

方案2：子组件层传递参数 #

如果不想在父组件的渲染逻辑里加箭头函数，可以在子组件触发长按时主动传递标题：

1. 修改ListItemCA的长按触发逻辑

function ListItemCA({data, onLongPress}) {
    return (
        {/* 长按时把当前项的Title传给父组件回调 */}
        <TouchableOpacity onLongPress={() => onLongPress(data.Title)} >
        <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>
    );
}

2. 父组件保持原有FlatList写法不变，只需要调整openModal函数支持接收标题参数、新增selectedTitle状态存储即可，和方案1的HomePage逻辑一致。

内容的提问来源于stack exchange，提问作者Muhammad Rehman