Передача данных из элемента списка в дочерний компонент реагирует на нативный

Question

У меня есть данные отображения Flatlist в ListItem из запроса на выборку, как показано.

ListTrips.js

export default class ListTrip extends Component {
....
  toggleModalConfirmTrip = item => {
if (this.ModalConfirmTrip) {
  this.ModalConfirmTrip.toggleModal();
}
};

<FlatList
   data={data}
   renderItem={({ item }) => (
      <ListItem
         *onPress={() => this.toggleModalConfirmTrip(item)*}
         roundAvatar
         title={`${item.location_from} to ${item.location_to} `}
         subtitle={item.user[0].name}
         rightTitle={item.timeStamp}
         avatar={
            <Image
               source={require('../assests/carLogo.png')}
               style={{ width: 40, height: 50, borderRadius: 10 }}
            />
         }
         containerStyle={{ borderBottomWidth: 0, paddingBottom: 10 }}
      />
   )}
   // Uses object ID to iterate over the trips
   keyExtractor={item => item._id}
   ItemSeparatorComponent={this.renderSeparator}
   ListHeaderComponent={this.renderHeader}
   ListFooterComponent={this.renderFooter}
   refreshing={refreshing}
   onRefresh={this.handleRefresh}
           .
           . 
           .

Я хочу передать данныевыбранный элемент для модального компонента (дочерний элемент ListTrips), чтобы я мог отобразить его.Я попытался сделать это, передав item в onPress={() => this.toggleModalConfirmTrip(item)}, но это не сработало.Я знаю, что должен передать его как опору своему дочернему компоненту, но я уверен, что это так.

ModalConfirmTrip.js

Answer 1

Я полагаю, что ваш ListItem должен иметь доступ к item в качестве реквизита, а ListItem является компонентом React, не имеющим состояния.Таким образом, вы должны вызвать onPress вашего touchable внутри ListItem с параметром item.

const ListItem = ({item, onPress, otherProps}) => {
    return (
        ...
     <Button onPress={() => onPress(item)} />
        ...
    );
}

Тогда ваш ListItem должен вызываться / обрабатываться следующим образом:

<ListItem
   onPress={(item) => this.toggleModalConfirmTrip(item)}
   roundAvatar
   ... />

Надеюсь, это поможет.Если у вас есть сторонняя библиотека пользовательского интерфейса для ListItem, укажите это.