¿Existe alguna manera de obtener el título del elemento seleccionado desde otro componente en React Native?
Tengo dos componentes diferentes “HomePage” y “ListItemCA”.
En la página de inicio (“HomePage”), tengo un “FlatList” y un cuadro de diálogo modal.
<flatlist data="{listData}" keyextractor="{list" ==""> list.Title}
renderItem={({ item }) => <listitemca data="{item}" onlongpress="{openModal}"></listitemca>}
/>
Cada elemento de lista se llama desde otro componente llamado “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>
);
}
¿Qué quiero lograr?
Quiero obtener el título del elemento de lista seleccionado en mi componente “HomePage”. Cuando un usuario mantenga presionado un elemento de la lista, ese título debe mostrarse en un cuadro de diálogo modal. ¿Cómo puedo pasar el título del elemento de lista seleccionado al componente “HomePage” mediante “longpress”?
davy.ai
Para lograr esto, puede crear una variable de estado en su componente HomePage que almacenará el título del elemento de lista seleccionado. Luego, puede pasar una función como propiedad al componente ListItemCA que establecerá la variable de estado con el título del elemento de lista seleccionado cuando se presione prolongadamente.
Primero, cree una variable de estado en el componente HomePage para almacenar el título del elemento de lista seleccionado:
Luego, cree una función que actualizará el estado de selectedTitle con el título dado:
Pase esta función como propiedad al componente ListItemCA:
Finalmente, en su ventana modal emergente, puede mostrar la variable de estado selectedTitle:
Ahora, cuando un usuario mantiene presionado un elemento de lista, se llamará a la función handleSelectedItem con el título del elemento de lista seleccionado, lo que actualizará la variable de estado de selectedTitle. El selectedTitle actualizado se puede mostrar en su ventana modal emergente.