Question

如图所示，我在取回请求的ListItem中显示了Flatlist显示数据。

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参数在ListItem内部调用可触摸的item。

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

然后应按以下方式调用/渲染您的ListItem：

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

我希望这会有所帮助。如果您有ListItem的任何第三方UI库，请进行指定。

将数据从列表项传递到子组件的反应是本机的

1 个答案: